КиберЩИТЕ #149
Description
<title>Кибербезопасность - Защита от мошенников</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }Ваня:
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.app-container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 30px 20px;
text-align: center;
}
.header h1 {
font-size: 2.2em;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 1.1em;
}
.nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
background: #f8f9fa;
}
.nav-btn {
padding: 15px;
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-weight: 600;
color: #2c3e50;
}
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-color: #667eea;
}
.nav-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.content {
padding: 30px;
min-height: 500px;
}
.section {
display: none;
animation: fadeIn 0.5s ease;
}
.section.active {
display: block;
}
.card {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.card.warning {
border-left: 5px solid #ffc107;
background: #fffbf0;
}
.card.danger {
border-left: 5px solid #dc3545;
background: #fdf4f4;
}
.card.success {
border-left: 5px solid #28a745;
background: #f8fff9;
}
.card.info {
border-left: 5px solid #17a2b8;
background: #f0fdff;
}
.card h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.card-content {
display: none;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e9ecef;
}
.card.active .card-content {
display: block;
}
.contact-item {
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-item:hover {
background: #667eea;
color: white;
}
.test-question {
margin-bottom: 25px;
}
.test-options {
display: grid;
gap: 10px;
}
.test-option {
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.test-option:hover {
background: #e9ecef;
}
.test-option.correct {
background: #d4edda;
border: 2px solid #28a745;
}
.test-option.incorrect {
background: #f8d7da;
border: 2px solid #dc3545;
}
.emergency-btn {
display: block;
width: 100%;
padding: 20px;
background: #dc3545;
color: white;
border: none;
border-radius: 12px;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
margin: 20px 0;
transition: all 0.3s ease;
}
.emergency-btn:hover {
background: #c82333;
transform: scale(1.02);
}
.progress-bar {
height: 6px;
background: #e9ecef;
border-radius: 3px;
margin: 20px 0;
overflow: hidden;
}
.progress {
height: 100%;
background: #28a745;
width: 0%;
transition: width 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.back-btn {
padding: 10px 20px;
background: #6c757d;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-bottom: 20px;
}
@media (max-width: 600px) {
.nav {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 1.8em;
}
.content {
padding: 20px;
}
}
</style>
🛡️ Кибербезопасность
Защита от мошенников в цифровом мире
<div class="nav">
<div class="nav-btn active" data-section="types">Виды мошенничества</div>
<div class="nav-btn" data-section="protection">Как защититься</div>
<div class="nav-btn" data-section="emergency">Экстренные случаи</div>
<div class="nav-btn" data-section="test">Проверь знания</div>
<div class="nav-btn" data-section="contacts">Полезные контакты</div>
</div>
<div class="content">
<!-- Раздел: Виды мошенничества -->
<div class="section active" id="types">
<h2>📱 Распространенные виды мошенничества</h2>
<div class="card warning" onclick="toggleCard(this)">
<h3>📧 Фишинг</h3>
<p>Нажмите для подробностей</p>
<div class="card-content">
<p><strong>Что это:</strong> Поддельные письма, СМС и сообщения, маскирующиеся под официальные организации.</p>
<p><strong>Примеры:</strong></p>
<ul>
<li>Письма от "банка" с просьбой подтвердить данные</li>
<li>СМС о блокировке карты со ссылкой</li>
<li>Сообщения в соцсетях от "друзей" с просьбой о помощи</li>
</ul>
</div>
</div>
<div class="card danger" onclick="toggleCard(this)">
<h3>📞 Телефонное мошенничество</h3>
<p>Нажмите для подробностей</p>
<div class="card-content">
<p><strong>Распространенные схемы:</strong></p>
<ul>
<li>"Сотрудник банка" сообщает о подозрительных операциях</li>
Помните: Банки НИКОГДА не просят коды из СМС!
<div class="card info" onclick="toggleCard(this)">
<h3>💼 Социальная инженерия</h3>
<p>Нажмите для подробностей</p>
<div class="card-content">
<p><strong>Методы манипуляции:</strong></p>
<ul>
<li>Создание срочности ("Сделайте сейчас или будет поздно!")</li>
<li>Использование авторитета ("Я из полиции/банка")</li>
<li>Взывание к эмоциям ("Ваш родственник в опасности!")</li>
</ul>
</div>
</div>
</div>
<!-- Раздел: Как защититься -->
<div class="section" id="protection">
<h2>🔒 Как защитить себя</h2>
<div class="card success" onclick="toggleCard(this)">
<h3>✅ Основные правила безопасности</h3>
<p>Нажмите для подробностей</p>
<div class="card-content">
<ul>
<li>НИКОМУ не сообщайте коды из СМС</li>
<li>Не переходите по подозрительным ссылкам</li>
<li>Проверяйте отправителя писем и сообщений</li>
<li>Установите антивирусное ПО</li>
<li>Используйте двухфакторную аутентификацию</li>
</ul>
</div>
</div>
<div class="card info" onclick="toggleCard(this)">
<h3>💳 Защита банковских карт</h3>
<p>Нажмите для подробностей</p>
<div class="card-content">
<ul>
<li>Установите лимиты на операции</li>
<li>Подключите СМС-информирование</li>
<li>Используйте виртуальные карты для онлайн-платежей</li>
<li>Никогда не фотографируйте карту полностью</li>
<li>Блокируйте карту при малейших подозрениях</li>
</ul>
</div>
</div>
<div class="card warning" onclick="toggleCard(this)">
<h3>📱 Безопасность смартфона</h3>
<p>Нажмите для подробностей</p>
<div class="card-content">
<ul>
<li>Установите блокировку экрана</li>
<li>Скачивайте приложения только из официальных магазинов</li>
<li>Регулярно обновляйте ОС и приложения</li>
<li>Не подключайтесь к публичным Wi-Fi сетям для банковских операций</li>
<li>Проверяйте разрешения приложений</li>
</ul>
</div>
</div>
</div>
<!-- Раздел: Экстренные случаи -->
<div class="section" id="emergency">
<h2>🚨 Экстренные случаи</h2>
<button class="emergency-btn" onclick="showEmergencyPlan()">
🚨 ЧТО ДЕЛАТЬ, ЕСЛИ ВЫ СТАЛИ ЖЕРТВОЙ МОШЕННИКОВ
</button>
<div id="emergency-plan" style="display: none;">
<div class="card danger">
<h3>СРОЧНЫЙ ПЛАН ДЕЙСТВИЙ:</h3>
- НЕМЕДЛЕННО позвоните в банк для блокировки карты
- Сообщите в полицию по телефону 102
- Смените пароли от банковских приложений
- Сохраните доказательства:
- Номер телефона мошенника
- Скриншоты переписки
- Данные о переводах
- Предупредите банк о мошеннической схеме
<div class="card warning" onclick="toggleCard(this)">
<h3>📞 Экстренные номера</h3>
<p>Нажмите для просмотра</p>
<div class="card-content">
<p><strong>Полиция:</strong> 102 (с мобильного)</p>
<p><strong>Единый номер экстренных служб:</strong> 112</p>
<p><strong>Банк России (горячая линия):</strong> 8-800-250-40-72</p>
<p><strong>Ваш банк:</strong> [Добавьте номер своего банка]</p>
</div>
</div>
</div>
<!-- Раздел: Проверь знания -->
<div class="section" id="test">
<h2>🎯 Проверь свои знания</h2>
<div class="progress-bar">
<div class="progress" id="test-progress"></div>
</div>
<div class="test-question" id="question-1">
<p><strong>Вопрос 1:</strong> Вам звонят из "банка" и просят назвать код из СМС для "подтверждения личности". Ваши действия?</p>
<div class="test-options">
<div class="test-option" onclick="checkAnswer(this, 'correct')">Вежливо откажусь и перезвоню в банк по официальному номеру</div>
<div class="test-option" onclick="checkAnswer(this, 'incorrect')">Назову код, это же сотрудник банка</div>
<div class="test-option" onclick="checkAnswer(this, 'incorrect')">Попрошу перезвонить позже</div>
</div>
</div>
<div class="test-question" id="question-2" style="display: none;">
<p><strong>Вопрос 2:</strong> Вы получили СМС от "службы доставки" со ссылкой для отслеживания посылки. Что сделаете?</p>
<div class="test-options">
<div class="test-option" onclick="checkAnswer(this, 'incorrect')">Сразу перейду по ссылке</div>
<div class="test-option" onclick="checkAnswer(this, 'correct')">Проверю номер отправителя и зайду на официальный сайт</div>
<div class="test-option" onclick="checkAnswer(this, 'incorrect')">Проигнорирую сообщение</div>
</div>
</div>
<div class="test-question" id="question-3" style="display: none;">
<p><strong>Вопрос 3:</strong> Друг в соцсетях просит срочно перевести деньги. Ваши действия?</p>
<div class="test-options">
<div class="test-option" onclick="checkAnswer(this, 'incorrect')">Сразу переведу, друг в беде</div>
<div class="test-option" onclick="checkAnswer(this, 'correct')">Позвоню другу для подтверждения</div>
<div class="test-option" onclick="checkAnswer(this, 'incorrect')">Попрошу доказательства</div>
</div>
</div>
🎉 Тест пройден!
Вы показали хорошие знания в области кибербезопасности!
Пройти еще раз <!-- Раздел: Полезные контакты -->
<div class="section" id="contacts">
<h2>📞 Полезные контакты</h2>
<div class="contact-item" onclick="copyToClipboard('102')">
<strong>🚓 Полиция</strong><br>
Телефон: 102<br>
<small>Нажмите для копирования номера</small>
</div>
<div class="contact-item" onclick="copyToClipboard('112')">
<strong>🚑 Единый номер экстренных служб</strong><br>
Телефон: 112<br>
<small>Нажмите для копирования номера</small>
</div>
<div class="contact-item" onclick="copyToClipboard('88002504072')">
<strong>🏦 Банк России (горячая линия)</strong><br>
Телефон: 8-800-250-40-72<br>
<small>Нажмите для копирования номера</small>
</div>
<div class="contact-item" onclick="addBankContact()">
<strong>💳 Ваш банк</strong><br>
<span id="bank-contact">[Нажмите чтобы добавить номер]</span><br>
<small>Нажмите для добавления номера</small>
</div>
<div class="card info" style="margin-top: 20px;">
<h3>💡 Совет</h3>
<p>Сохраните эти номера в контактах своего телефона для быстрого доступа в экстренной ситуации.</p>
</div>
</div>
</div>
</div>
<script>
// Переключение между разделами
document.querySelectorAll('.nav-btn').forEach(btn => {
btn.addEventListener('click', function() {
// Убираем активный класс у всех кнопок
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
// Добавляем активный класс текущей кнопке
this.classList.add('active');
// Скрываем все разделы
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});
// Показываем выбранный раздел
const sectionId = this.getAttribute('data-section');
document.getElementById(sectionId).classList.add('active');
});
});
// Переключение карточек
function toggleCard(card) {
card.classList.toggle('active');
}
// Показать экстренный план
function showEmergencyPlan() {
document.getElementById('emergency-plan').style.display = 'block';
}
// Переменные для теста
let currentQuestion = 1;
let correctAnswers = 0;
// Проверка ответов в тесте
function checkAnswer(element, type) {
const options = element.parentElement.querySelectorAll('.test-option');
options.forEach(opt => {
opt.classList.remove('correct', 'incorrect');
opt.style.pointerEvents = 'none';
});
element.classList.add(type);
if (type === 'correct') {
correctAnswers++;
}
setTimeout(() => {
showNextQuestion();
}, 1500);
}
// Показать следующий вопрос
function showNextQuestion() {
document.getElementById(question-${currentQuestion}).style.display = 'none';
currentQuestion++;
if (currentQuestion <= 3) {
document.getElementById(question-${currentQuestion}).style.display = 'block';
document.getElementById('test-progress').style.width = ${(currentQuestion-1)/3*100}%;
} else {
document.getElementById('test-progress').style.width = '100%';