diff --git a/src/apps/yandex/Yandex.css b/src/apps/yandex/Yandex.css index e11efdd..4cb412f 100644 --- a/src/apps/yandex/Yandex.css +++ b/src/apps/yandex/Yandex.css @@ -1,5 +1,813 @@ -.yandex { +/* * { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; + background: #f5f5f5; +} */ + +/* .app { + max-width: 1200px; + margin: 0 auto; + background: rgb(41, 41, 41); + min-height: 100vh; + box-shadow: 0 0 20px rgba(0,0,0,0.1); +} */ + +.yandex-page { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 80vh; + padding: 40px; +} + +.yandex-logo { + font-size: 64px; + color: #fc3f1d; + margin-bottom: 40px; + margin-top: 60px; + font-weight: 700; +} + +.yandex-search { + width: 600px; + padding: 14px 12px; + font-size: 16px; + border: 2px solid #e5e5e5; + border-radius: 48px; + outline: none; + transition: all 0.2s; +} + +.yandex-search:focus { + border-color: #fc3f1d; + box-shadow: 0 0 0 3px rgba(252,63,29,0.1); +} + +.yandex-btn { + padding: 5px 40px; + font-size: 15px; + background: #fc3f1d; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; +} + +.yandex-btn:hover { + background: #e63510; + transform: translateY(-1px); +} + +.services-icons { + display: flex; + gap: 40px; + margin-top: 60px; + justify-content: center; +} + +.service-icon { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + cursor: pointer; + transition: all 0.2s; +} + +.service-icon:hover { + transform: translateY(-5px); +} + +.icon-circle { + width: 60px; + height: 60px; + background: #f0f0f0; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + color: #666; +} + +.service-icon:hover .icon-circle { + background: #fc3f1d; + color: white; + box-shadow: 0 5px 15px rgba(252,63,29,0.3); +} + +.service-icon span { + font-size: 14px; + color: #666; +} + +.service-icon:hover span { + color: #fc3f1d; +} + +.yandex-hint { + margin-top: 60px; + color: #999; + font-size: 13px; +} + +.header-with-back { + display: flex; + gap: 15px; + padding: 15px 20px; + background: rgb(15, 15, 15); + border-bottom: 1px solid #e5e5e5; + position: sticky; + top: 0; + z-index: 100; +} + +.back-btn { + background: none; + border: none; + font-family: 'Courier New', Courier, monospace; + color: #fc3f1d; + cursor: pointer; + font-size: 14px; + padding: 8px 16px; + border-radius: 8px; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 8px; +} + +.back-btn:hover { + background: #f0f0f0; +} + +.yandex-back { + color: #666; +} + +.colorGos { + color: white; +} + +.gosuslugi-page { + padding: 60px 40px; + text-align: center; +} + +.gosuslugi-header { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + margin-bottom: 20px; +} + +.gosuslugi-header svg { + width: 48px; + height: 48px; + color: #2d5a9c; +} + +.gosuslugi-title { + color: #2d5a9c; + font-size: 36px; + margin: 0; +} + +.login-form { + max-width: 400px; + margin: 40px auto; +} + +.input-field { + width: 100%; + padding: 14px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 14px; + outline: none; +} + +.input-field:focus { + border-color: #2d5a9c; +} + +.login-btn { + width: 100%; + padding: 14px; + background: #2d5a9c; + color: white; + border: none; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + transition: all 0.2s; +} + +.login-btn:hover { + background: #1e4a7a; +} + +.gosuslugi-note { + margin-top: 20px; + font-size: 12px; + color: #999; +} + +.email-list { + padding: 20px; +} + +.email-list h2 { + margin-bottom: 20px; + color: #a5a5a5; +} + +.email-item { + display: flex; + align-items: center; + gap: 15px; + padding: 16px; + background: rgb(211, 211, 211); + border: 1px solid #c4c4c4; + border-radius: 12px; + margin-bottom: 10px; + cursor: pointer; + transition: all 0.2s; +} + +.email-item:hover { + background: #f0f0f0; + transform: translateX(5px); + box-shadow: 0 2px 8px rgba(0,0,0,0.05); +} + +.email-icon { + display: flex; + align-items: center; + justify-content: center; +} + +.email-info { + flex: 1; +} + +.email-info strong { + display: block; + margin-bottom: 5px; + color: #0e0e0e; +} + +.email-info p { + color: #666; + font-size: 14px; +} + +.email-detail { + padding: 30px; + max-width: 800px; + margin: 0 auto; +} + +.email-detail-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px; +} + +.email-detail-header svg { + width: 32px; + height: 32px; + color: #e5e5e5; +} + +.email-from { + margin: 15px 0; + padding-bottom: 15px; + border-bottom: 1px solid #eee; +} + +.email-body { + line-height: 1.6; + color: #ffffff; +} + +.phishing-form { + margin-top: 30px; + padding: 25px; + background: #fff3cd; + border: 1px solid #ffc107; + border-radius: 12px; +} + +.phishing-form h4 { + color: #856404; + margin-bottom: 15px; +} + +.phishing-btn { + width: 100%; + padding: 12px; + background: #ffc107; + color: #856404; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: bold; + transition: all 0.2s; +} + +.phishing-btn:hover { + background: #e0a800; +} + +.gosuslugi-link { + margin-top: 30px; + text-align: center; +} + +.gosuslugi-nav-btn { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 14px 30px; + background: #2d5a9c; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; + transition: all 0.2s; +} + +.gosuslugi-nav-btn svg { + width: 24px; + height: 24px; + color: white; +} + +.gosuslugi-nav-btn:hover { + background: #1e4a7a; + transform: scale(1.02); +} + +/* Модальное окно */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + animation: fadeIn 0.2s ease; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.modal { + background: white; + padding: 30px; + border-radius: 16px; + text-align: center; + max-width: 450px; + width: 90%; + animation: slideIn 0.3s ease; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.modal-title { + color: #f44336; + font-size: 24px; + margin-bottom: 15px; +} + +.modal-data { + margin: 20px 0; + padding: 15px; + background: #f5f5f5; + border-radius: 8px; + font-family: monospace; + text-align: left; + font-size: 14px; +} + +.modal-btn { + padding: 12px 30px; + background: #4caf50; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; + transition: all 0.2s; +} + +.modal-btn:hover { + background: #45a049; + transform: scale(1.02); +} + +/* Адаптивность */ +@media (max-width: 768px) { + .yandex-search { width: 100%; - height: 100%; - background: url("/yandex_search.jpg"); -} \ No newline at end of file + } + + .yandex-logo { + font-size: 48px; + } + + .services-icons { + gap: 20px; + } + + .icon-circle { + width: 60px; + height: 60px; + } + + .icon-circle svg { + width: 30px; + height: 30px; + } + + .email-detail { + padding: 20px; + } + + .gosuslugi-title { + font-size: 28px; + } +} +.fake-site-page { + min-height: 80vh; + display: flex; + justify-content: center; + align-items: center; + background: #fff3cd; + padding: 40px; +} + +.fake-site-content { + text-align: center; + max-width: 600px; +} + +.fake-title { + color: #856404; + font-size: 28px; + margin-bottom: 30px; +} + +.warning-box { + background: #fff3cd; + border: 2px solid #ffc107; + border-radius: 12px; + padding: 20px; + margin-bottom: 30px; +} + +.warning-box p { + color: #856404; + margin: 10px 0; +} + +.download-section { + margin-top: 30px; +} + +.download-btn { + padding: 15px 30px; + font-size: 18px; + background: #dc3545; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; +} + +.download-btn:hover { + background: #c82333; + transform: scale(1.05); +} + +/* Официальный сайт ТелеЛитр */ +.telelitra-page { + min-height: 80vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 40px; +} + +.telelitra-content { + text-align: center; + max-width: 700px; + background: white; + border-radius: 20px; + padding: 40px; + box-shadow: 0 20px 60px rgba(0,0,0,0.2); +} + +.telelitra-title { + color: #4caf50; + font-size: 32px; + margin-bottom: 20px; +} + +.secure-box { + background: #d4edda; + border: 2px solid #28a745; + border-radius: 12px; + padding: 20px; + margin-bottom: 30px; +} + +.secure-box p { + color: #155724; + margin: 10px 0; + font-size: 16px; +} + +.info-section h2 { + color: #333; + margin-bottom: 20px; +} + +.features { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + margin: 30px 0; +} + +.feature { + padding: 12px; + background: #f8f9fa; + border-radius: 8px; + font-size: 14px; +} + +.register-btn { + padding: 12px 30px; + background: #4caf50; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; + transition: all 0.2s; +} + +.register-btn:hover { + background: #45a049; + transform: translateY(-2px); +} + +/* Заголовки с предупреждениями */ +.warning-header { + background: #fff3cd; + border-bottom-color: #ffc107; +} + +.warning-badge { + display: flex; + align-items: center; + gap: 8px; + background: #dc3545; + color: white; + padding: 5px 12px; + border-radius: 20px; + font-size: 12px; +} + +.secure-header { + background: #d4edda; + border-bottom-color: #28a745; +} + +.secure-badge { + background: #28a745; + color: white; + padding: 5px 12px; + border-radius: 20px; + font-size: 12px; +} + +/* Модальные окна */ +.success-modal { + border-top: 5px solid #4caf50; +} + +.success-icon { + font-size: 60px; + margin-bottom: 10px; +} + +.success-title { + color: #4caf50; + font-size: 28px; + margin-bottom: 15px; +} + +.success-data { + background: #d4edda; + color: #155724; +} + +.success-btn { + background: #4caf50; +} + +.virus-modal { + border-top: 5px solid #dc3545; +} + +.virus-icon { + font-size: 60px; + margin-bottom: 10px; +} + +.virus-title { + color: #dc3545; + font-size: 24px; + margin-bottom: 15px; +} + +.virus-data { + background: #f8d7da; + color: #721c24; + text-align: left; +} + +.virus-data br { + margin-bottom: 5px; +} + +.virus-btn { + background: #dc3545; +} + +/* Поиск */ +.search-container { + display: flex; + gap: 10px; + width: 600px; +} + +@media (max-width: 768px) { + .search-container { + width: 100%; + flex-direction: column; + } + + .features { + grid-template-columns: 1fr; + } + + .telelitra-title { + font-size: 24px; + } + + .fake-title { + font-size: 22px; + } +} + +/* Страница результатов поиска */ +.search-results-page { + padding: 30px; + max-width: 800px; + margin: 0 auto; +} + +.search-info { + margin-bottom: 30px; + padding-bottom: 15px; + border-bottom: 1px solid #e5e5e5; +} + +.results-count { + color: #666; + font-size: 14px; + margin-top: 5px; +} + +.search-results-list { + display: flex; + flex-direction: column; + gap: 20px; +} + +.search-result { + display: flex; + gap: 15px; + padding: 20px; + background: white; + border: 1px solid #e5e5e5; + border-radius: 12px; + cursor: pointer; + transition: all 0.2s; +} + +.search-result:hover { + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + transform: translateY(-2px); +} + +.search-result.official:hover { + border-color: #4caf50; + background: #f0fff4; +} + +.search-result.fake:hover { + border-color: #ff9800; + background: #fff8f0; +} + +.result-icon { + font-size: 28px; +} + +.result-content { + flex: 1; +} + +.result-title { + font-size: 18px; + font-weight: 500; + color: #1a0dab; + margin-bottom: 5px; +} + +.result-url { + font-size: 12px; + color: #006621; + margin-bottom: 8px; +} + +.result-description { + font-size: 14px; + color: #545454; + margin-bottom: 10px; +} + +.result-badge { + display: inline-block; + padding: 4px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 500; +} + +.result-badge.secure { + background: #d4edda; + color: #155724; +} + +.result-badge.dangerous { + background: #fff3cd; + color: #856404; +} + +.fake-url, .secure-url { + font-family: monospace; + font-size: 14px; + font-weight: bold; +} + +.fake-url { + color: #dc3545; +} + +.secure-url { + color: #28a745; +} diff --git a/src/apps/yandex/Yandex.tsx b/src/apps/yandex/Yandex.tsx index e19f119..143676b 100644 --- a/src/apps/yandex/Yandex.tsx +++ b/src/apps/yandex/Yandex.tsx @@ -1,14 +1,422 @@ -import React from 'react'; +import React, { useState } from 'react'; import './Yandex.css'; const YandexApp: React.FC = () => { - return ( -
- {/*

Vscode

- - */} -
+ const [currentPage, setCurrentPage] = useState<'yandex' | 'email' | 'gosuslugi' | 'fakeSite' | 'telelitra' | 'searchResults'>('yandex'); + const [selectedEmail, setSelectedEmail] = useState(null); + const [login, setLogin] = useState(''); + const [password, setPassword] = useState(''); + const [showPhishingModal, setShowPhishingModal] = useState(false); + const [showSuccessModal, setShowSuccessModal] = useState(false); + const [showVirusModal, setShowVirusModal] = useState(false); + const [searchQuery, setSearchQuery] = useState(''); + const [showFakeSiteWarning, setShowFakeSiteWarning] = useState(false); + + const emails = [ + { id: 1, from: 'security@bank.ru', subject: 'Ваш аккаунт Госуслуги заблокирован', body: 'Уважаемый клиент! Ваш аккаунт был заблокирован. Для разблокировки перейдите по ссылке и подтвердите данные.' }, + { id: 2, from: 'noreply@gosuslugi.ru', subject: 'Подтверждение записи на портале Госуслуги', body: 'Ваша запись подтверждена. Для просмотра перейдите на сайт госуслуг.' } + ]; + + const handlePhishingSubmit = () => { + if (login && password) { + setShowPhishingModal(true); + } + }; + + const handleGosuslugiLogin = () => { + if (login && password) { + setShowSuccessModal(true); + } + }; + + const handleSearch = () => { + if (searchQuery.toLowerCase().includes('телелитр')) { + setCurrentPage('searchResults'); + } else { + alert('Ничего не найдено. Попробуйте найти "ТелеЛитр"'); + } + }; + + const handleFakeLink = () => { + setCurrentPage('fakeSite'); + }; + + const handleOfficialLink = () => { + setCurrentPage('telelitra'); + }; + + const handleDownloadVirus = () => { + setShowVirusModal(true); + }; + + const MailIcon = () => ( + + + + + ); + + const GosuslugiIcon = () => ( + + + + + + ); + + const BackIcon = () => ( + + + + ); + + const EmailIcon = () => ( + + + + + ); + + const WarningIcon = () => ( + + + + ); + + const SecureIcon = () => ( + + + + + + ); + + if (currentPage === 'yandex') { + return ( +
+
+

Яндекс

+
+ setSearchQuery(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && handleSearch()} + /> + +
+ +
+
setCurrentPage('email')}> +
+ +
+ Почта +
+
setCurrentPage('gosuslugi')}> +
+ +
+ Госуслуги +
+
+ +

Найдется всё. Например, ТелеЛитр

+
+
); + } + + // Страница результатов поиска + if (currentPage === 'searchResults') { + return ( +
+
+ +
+
+
+

Результаты поиска: ТелеЛитр

+

Найдено 2 результата

+
+ +
+ {/* Официальный сайт */} +
+
🔒
+
+
ТелеЛитр - Официальный сайт
+
https://tele-litra.gov.ru
+
Крупнейшая библиотека электронных книг. Более 1 миллиона книг. Официальный сайт с лицензионными книгами.
+
Защищенное соединение
+
+
+ + {/* Поддельный сайт */} +
+
⚠️
+
+
ТелеЛитр - Скачать бесплатно
+
http://tele-litra-free.download
+
Скачай любую книгу бесплатно без регистрации! Все книги в открытом доступе.
+
Незащищенное соединение
+
+
+
+
+
+ ); + } + + // Страница Госуслуг + if (currentPage === 'gosuslugi') { + return ( +
+
+ +
+
+
+ +

Госуслуги

+
+

Добро пожаловать на портал государственных услуг

+
+ setLogin(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+

Официальный сайт. Ваши данные в безопасности

+
+ + {showSuccessModal && ( +
+
+

Поздравляем!

+

Вы успешно вошли на официальный сайт Госуслуг!

+

Все ваши данные в безопасности. Вы выполнили задание правильно!

+
+ Ваши данные:
+ Логин: {login}
+ Пароль: {password} +
+ +
+
+ )} +
+ ); + } + if (currentPage === 'fakeSite') { + return ( +
+
+
+ + Незащищенное соединение +
+ +
+
+
+

ТелеЛитр - НЕОФИЦИАЛЬНЫЙ САЙТ

+
+

ВНИМАНИЕ! Этот сайт не имеет защищенного SSL-сертификата!

+

Ваше соединение не зашифровано. Данные могут быть перехвачены злоумышленниками.

+

Адресная строка: http://tele-litra-free.download (не защищено)

+
+
+

Для скачивания книг установите наше приложение:

+ +
+
+
+ + {showVirusModal && ( +
+
+
🦠
+

О НЕТ! ВЫ СКАЧАЛИ ВИРУС!

+

Вы скачали файл с поддельного сайта. Это вредоносное ПО!

+

Никогда не скачивайте файлы с непроверенных сайтов и не переходите по подозрительным ссылкам!

+
+ Что произошло:
+ - Ваш компьютер заражен трояном
+ - Данные могли быть украдены
+ - Рекомендуется немедленно запустить антивирус
+ - Не вводите пароли на подозрительных сайтах +
+ +
+
+ )} +
+ ); + } + if (currentPage === 'telelitra') { + return ( +
+
+
+ + Защищенное соединение +
+ +
+
+
+

✅ ТелеЛитр - Официальный сайт

+
+

🔒 SSL Сертификат подтвержден (Let's Encrypt)

+

Адресная строка: https://tele-litra.gov.ru (защищено)

+

Ваше соединение зашифровано. Сайт официальный и безопасный.

+
+
+

Добро пожаловать в ТелеЛитр!

+

Крупнейшая официальная библиотека электронных книг.

+
+
📚 Более 1 миллиона лицензионных книг
+
🎧 Аудиокниги от официальных издательств
+
📱 Официальное мобильное приложение
+
⭐ Рейтинги и отзывы читателей
+
💰 Бесплатные книги по школьной программе
+
🎓 Образовательные материалы
+
+ +
+
+
+
+ ); + } + + // Детали письма + if (selectedEmail) { + const email = emails.find(e => e.id === selectedEmail); + return ( +
+
+ + +
+
+
+ +

{email?.subject}

+
+

От: {email?.from}

+

{email?.body}

+ + {selectedEmail === 1 && ( +
+

⚠️ Внимание! Подтвердите данные

+ setLogin(e.target.value)} + className="input-field" + /> + setPassword(e.target.value)} + className="input-field" + /> + +
+ )} + + {selectedEmail === 2 && ( +
+ +
+ )} +
+ + {showPhishingModal && ( +
+
+

😱 О нет! Ваши данные украдены!

+

Вы ввели логин и пароль на поддельном сайте.

+

Никогда не переходите по подозрительным ссылкам из писем!

+
+ Украденные данные:
+ Логин: {login}
+ Пароль: {password} +
+ +
+
+ )} +
+ ); + } + + // Список писем + return ( +
+
+ +
+
+

Входящие

+ {emails.map(email => ( +
setSelectedEmail(email.id)}> +
+ +
+
+ {email.from} +

{email.subject}

+
+
+ ))} +
+
+ ); }; -export default YandexApp; \ No newline at end of file +export default YandexApp;