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 ( -
Найдется всё. Например, ТелеЛитр
+Результаты поиска: ТелеЛитр
+Найдено 2 результата
+Добро пожаловать на портал государственных услуг
+Официальный сайт. Ваши данные в безопасности
+Вы успешно вошли на официальный сайт Госуслуг!
+Все ваши данные в безопасности. Вы выполнили задание правильно!
+ВНИМАНИЕ! Этот сайт не имеет защищенного SSL-сертификата!
+Ваше соединение не зашифровано. Данные могут быть перехвачены злоумышленниками.
+Адресная строка: http://tele-litra-free.download (не защищено)
+Для скачивания книг установите наше приложение:
+ +Вы скачали файл с поддельного сайта. Это вредоносное ПО!
+Никогда не скачивайте файлы с непроверенных сайтов и не переходите по подозрительным ссылкам!
+🔒 SSL Сертификат подтвержден (Let's Encrypt)
+Адресная строка: https://tele-litra.gov.ru (защищено)
+Ваше соединение зашифровано. Сайт официальный и безопасный.
+Крупнейшая официальная библиотека электронных книг.
+От: {email?.from}
+{email?.body}
+ + {selectedEmail === 1 && ( +Вы ввели логин и пароль на поддельном сайте.
+Никогда не переходите по подозрительным ссылкам из писем!
+{email.subject}
+