КиберЩИТЕ #149

Open
Open
КиберЩИТЕ#149

Description

@Kronosi707
Kronosi707
opened on Oct 31, 2025

Ваня:

<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>
    1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
    2. Сообщите в полицию по телефону 102
    3. Смените пароли от банковских приложений
    4. Сохраните доказательства:
      • Номер телефона мошенника
      • Скриншоты переписки
      • Данные о переводах
    5. Предупредите банк о мошеннической схеме
     <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%';

    Activity

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Metadata

    Metadata

    Assignees

    No one assigned

      Labels

      No labels
      No labels

      Type

      No type

      Projects

      No projects

        Milestone

        No milestone

        Relationships

        None yet

        Development

        No branches or pull requests

        Issue actions

        , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
         blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

        Skip to content
        КиберЩИТЕ #149
        Open
        Open
        КиберЩИТЕ#149
        Description
        @Kronosi707
        Kronosi707
        opened on Oct 31, 2025
        Ваня:
        
<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>

        1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
        2. Сообщите в полицию по телефону 102
        3. Смените пароли от банковских приложений
        4. Сохраните доказательства:
          • Номер телефона мошенника
          • Скриншоты переписки
          • Данные о переводах
        5. Предупредите банк о мошеннической схеме
         <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%';

        Activity
        Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
        Metadata
        Metadata
        Assignees
        No one assigned
          Labels
          No labels
          No labels
          Type
          No type
          Projects
          No projects
            Milestone
            No milestone
            Relationships
            None yet
            Development
            No branches or pull requests
            Issue actions
            
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

            Skip to content
            КиберЩИТЕ #149
            Open
            Open
            КиберЩИТЕ#149
            Description
            @Kronosi707
            Kronosi707
            opened on Oct 31, 2025
            Ваня:
            
<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>

            1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
            2. Сообщите в полицию по телефону 102
            3. Смените пароли от банковских приложений
            4. Сохраните доказательства:
              • Номер телефона мошенника
              • Скриншоты переписки
              • Данные о переводах
            5. Предупредите банк о мошеннической схеме
             <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%';

            Activity
            Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
            Metadata
            Metadata
            Assignees
            No one assigned
              Labels
              No labels
              No labels
              Type
              No type
              Projects
              No projects
                Milestone
                No milestone
                Relationships
                None yet
                Development
                No branches or pull requests
                Issue actions
                
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

                Skip to content
                КиберЩИТЕ #149
                Open
                Open
                КиберЩИТЕ#149
                Description
                @Kronosi707
                Kronosi707
                opened on Oct 31, 2025
                Ваня:
                
<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>

                1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
                2. Сообщите в полицию по телефону 102
                3. Смените пароли от банковских приложений
                4. Сохраните доказательства:
                  • Номер телефона мошенника
                  • Скриншоты переписки
                  • Данные о переводах
                5. Предупредите банк о мошеннической схеме
                 <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%';

                Activity
                Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
                Metadata
                Metadata
                Assignees
                No one assigned
                  Labels
                  No labels
                  No labels
                  Type
                  No type
                  Projects
                  No projects
                    Milestone
                    No milestone
                    Relationships
                    None yet
                    Development
                    No branches or pull requests
                    Issue actions
                    
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

                    Skip to content
                    КиберЩИТЕ #149
                    Open
                    Open
                    КиберЩИТЕ#149
                    Description
                    @Kronosi707
                    Kronosi707
                    opened on Oct 31, 2025
                    Ваня:
                    
<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>

                    1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
                    2. Сообщите в полицию по телефону 102
                    3. Смените пароли от банковских приложений
                    4. Сохраните доказательства:
                      • Номер телефона мошенника
                      • Скриншоты переписки
                      • Данные о переводах
                    5. Предупредите банк о мошеннической схеме
                     <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%';

                    Activity
                    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
                    Metadata
                    Metadata
                    Assignees
                    No one assigned
                      Labels
                      No labels
                      No labels
                      Type
                      No type
                      Projects
                      No projects
                        Milestone
                        No milestone
                        Relationships
                        None yet
                        Development
                        No branches or pull requests
                        Issue actions
                        
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

                        Skip to content
                        КиберЩИТЕ #149
                        Open
                        Open
                        КиберЩИТЕ#149
                        Description
                        @Kronosi707
                        Kronosi707
                        opened on Oct 31, 2025
                        Ваня:
                        
<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>

                        1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
                        2. Сообщите в полицию по телефону 102
                        3. Смените пароли от банковских приложений
                        4. Сохраните доказательства:
                          • Номер телефона мошенника
                          • Скриншоты переписки
                          • Данные о переводах
                        5. Предупредите банк о мошеннической схеме
                         <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%';

                        Activity
                        Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
                        Metadata
                        Metadata
                        Assignees
                        No one assigned
                          Labels
                          No labels
                          No labels
                          Type
                          No type
                          Projects
                          No projects
                            Milestone
                            No milestone
                            Relationships
                            None yet
                            Development
                            No branches or pull requests
                            Issue actions
                            
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

                            Skip to content
                            КиберЩИТЕ #149
                            Open
                            Open
                            КиберЩИТЕ#149
                            Description
                            @Kronosi707
                            Kronosi707
                            opened on Oct 31, 2025
                            Ваня:
                            
<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>

                            1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
                            2. Сообщите в полицию по телефону 102
                            3. Смените пароли от банковских приложений
                            4. Сохраните доказательства:
                              • Номер телефона мошенника
                              • Скриншоты переписки
                              • Данные о переводах
                            5. Предупредите банк о мошеннической схеме
                             <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%';

                            Activity
                            Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
                            Metadata
                            Metadata
                            Assignees
                            No one assigned
                              Labels
                              No labels
                              No labels
                              Type
                              No type
                              Projects
                              No projects
                                Milestone
                                No milestone
                                Relationships
                                None yet
                                Development
                                No branches or pull requests
                                Issue actions
                                
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

                                Skip to content
                                КиберЩИТЕ #149
                                Open
                                Open
                                КиберЩИТЕ#149
                                Description
                                @Kronosi707
                                Kronosi707
                                opened on Oct 31, 2025
                                Ваня:
                                
<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>

                                1. НЕМЕДЛЕННО позвоните в банк для блокировки карты
                                2. Сообщите в полицию по телефону 102
                                3. Смените пароли от банковских приложений
                                4. Сохраните доказательства:
                                  • Номер телефона мошенника
                                  • Скриншоты переписки
                                  • Данные о переводах
                                5. Предупредите банк о мошеннической схеме
                                 <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%';

                                Activity
                                Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
                                Metadata
                                Metadata
                                Assignees
                                No one assigned
                                  Labels
                                  No labels
                                  No labels
                                  Type
                                  No type
                                  Projects
                                  No projects
                                    Milestone
                                    No milestone
                                    Relationships
                                    None yet
                                    Development
                                    No branches or pull requests
                                    Issue actions