Skip to content

КиберЩИТЕ #149

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

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%';

    Metadata

    Metadata

    Assignees

    No one assigned

      Labels

      No labels
      No labels

      Type

      No type

      Fields

      No fields configured for issues without a type.

      Projects

      No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions