bump Yandex browser emulator

src/apps/yandex/Yandex.css

@@ -1,5 +1,813 @@
-.yandex {
-    width: 100%;
-    height: 100%;
-    background: url("/yandex_search.jpg");
+/* * {
+  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%;
+  }
+  
+  .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;
 }

src/apps/yandex/Yandex.tsx

@@ -1,12 +1,420 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './Yandex.css';
 
 const YandexApp: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState<'yandex' | 'email' | 'gosuslugi' | 'fakeSite' | 'telelitra' | 'searchResults'>('yandex');
+  const [selectedEmail, setSelectedEmail] = useState<number | null>(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 = () => (
+    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+      <path d="M22 7L12 13L2 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+    </svg>
+  );
+
+  const GosuslugiIcon = () => (
+    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+      <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+      <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+    </svg>
+  );
+
+  const BackIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  const EmailIcon = () => (
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4Z" stroke="#666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+      <path d="M22 7L12 13L2 7" stroke="#666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+    </svg>
+  );
+
+  const WarningIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 8V12M12 16H12.01M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  const SecureIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2L3 7L12 12L21 7L12 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M12 12V21" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+      <path d="M18 9.5V12C18 16 15 19 12 19C9 19 6 16 6 12V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+    </svg>
+  );
+
+  if (currentPage === 'yandex') {
     return (
-    <div className='yandex'>
-        {/* <h1>Vscode</h1>
-        <button>1</button>
-        <button>22</button> */}
+      <div className="app">
+        <div className="yandex-page">
+          <h1 className="yandex-logo">Яндекс</h1>
+          <div className="search-container">
+            <input 
+              type="text" 
+              placeholder="Найти..." 
+              className="yandex-search" 
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
+            />
+            <button className="yandex-btn" onClick={handleSearch}>Найти</button>
+          </div>
+          
+          <div className="services-icons">
+            <div className="service-icon" onClick={() => setCurrentPage('email')}>
+              <div className="icon-circle">
+                <MailIcon />
+              </div>
+              <span>Почта</span>
+            </div>
+            <div className="service-icon" onClick={() => setCurrentPage('gosuslugi')}>
+              <div className="icon-circle">
+                <GosuslugiIcon />
+              </div>
+              <span>Госуслуги</span>
+            </div>
+          </div>
+          
+          <p className="yandex-hint">Найдется всё. Например, ТелеЛитр</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Страница результатов поиска
+  if (currentPage === 'searchResults') {
+    return (
+      <div className="app">
+        <div className="header-with-back">
+          <button className="back-btn" onClick={() => setCurrentPage('yandex')}>
+            <BackIcon />
+            Назад к поиску
+          </button>
+        </div>
+        <div className="search-results-page">
+          <div className="search-info">
+            <p>Результаты поиска: <strong>ТелеЛитр</strong></p>
+            <p className="results-count">Найдено 2 результата</p>
+          </div>
+          
+          <div className="search-results-list">
+            {/* Официальный сайт */}
+            <div className="search-result official" onClick={handleOfficialLink}>
+              <div className="result-icon">🔒</div>
+              <div className="result-content">
+                <div className="result-title">ТелеЛитр - Официальный сайт</div>
+                <div className="result-url">https://tele-litra.gov.ru</div>
+                <div className="result-description">Крупнейшая библиотека электронных книг. Более 1 миллиона книг. Официальный сайт с лицензионными книгами.</div>
+                <div className="result-badge secure">Защищенное соединение</div>
+              </div>
+            </div>
+
+            {/* Поддельный сайт */}
+            <div className="search-result fake" onClick={handleFakeLink}>
+              <div className="result-icon">⚠️</div>
+              <div className="result-content">
+                <div className="result-title">ТелеЛитр - Скачать бесплатно</div>
+                <div className="result-url">http://tele-litra-free.download</div>
+                <div className="result-description">Скачай любую книгу бесплатно без регистрации! Все книги в открытом доступе.</div>
+                <div className="result-badge dangerous">Незащищенное соединение</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Страница Госуслуг
+  if (currentPage === 'gosuslugi') {
+    return (
+      <div className="app">
+        <div className="header-with-back">
+          <button className="back-btn" onClick={() => setCurrentPage('yandex')}>
+            <BackIcon />
+            Назад к Яндекс
+          </button>
+        </div>
+        <div className="gosuslugi-page">
+          <div className="gosuslugi-header">
+            <GosuslugiIcon />
+            <h1 className="gosuslugi-title">Госуслуги</h1>
+          </div>
+          <p className='colorGos'>Добро пожаловать на портал государственных услуг</p>
+          <div className="login-form">
+            <input 
+              type="text" 
+              placeholder="Логин" 
+              className="input-field" 
+              value={login}
+              onChange={(e) => setLogin(e.target.value)}
+            />
+            <input 
+              type="password" 
+              placeholder="Пароль" 
+              className="input-field" 
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <button className="login-btn" onClick={handleGosuslugiLogin}>Войти</button>
+          </div>
+          <p className="gosuslugi-note">Официальный сайт. Ваши данные в безопасности</p>
+        </div>
+
+        {showSuccessModal && (
+          <div className="modal-overlay">
+            <div className="modal success-modal">
+              <h3 className="success-title">Поздравляем!</h3>
+              <p>Вы успешно вошли на официальный сайт Госуслуг!</p>
+              <p>Все ваши данные в безопасности. Вы выполнили задание правильно!</p>
+              <div className="modal-data success-data">
+                <strong>Ваши данные:</strong><br/>
+                Логин: {login}<br/>
+                Пароль: {password}
+              </div>
+              <button onClick={() => { setShowSuccessModal(false); setCurrentPage('yandex'); }} className="modal-btn success-btn">Отлично!</button>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (currentPage === 'fakeSite') {
+    return (
+      <div className="app">
+        <div className="header-with-back warning-header">
+          <div className="warning-badge">
+            <WarningIcon />
+            <span>Незащищенное соединение</span>
+          </div>
+          <button className="back-btn" onClick={() => setCurrentPage('searchResults')}>
+            <BackIcon />
+            Назад к результатам
+          </button>
+        </div>
+        <div className="fake-site-page">
+          <div className="fake-site-content">
+            <h1 className="fake-title"> ТелеЛитр - НЕОФИЦИАЛЬНЫЙ САЙТ</h1>
+            <div className="warning-box">
+              <p> ВНИМАНИЕ! Этот сайт не имеет защищенного SSL-сертификата!</p>
+              <p>Ваше соединение не зашифровано. Данные могут быть перехвачены злоумышленниками.</p>
+              <p>Адресная строка: <span className="fake-url">http://tele-litra-free.download</span> (не защищено)</p>
+            </div>
+            <div className="download-section">
+              <p>Для скачивания книг установите наше приложение:</p>
+              <button className="download-btn" onClick={handleDownloadVirus}>
+                📥 Скачать TeleLitru_Installer.exe
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {showVirusModal && (
+          <div className="modal-overlay">
+            <div className="modal virus-modal">
+              <div className="virus-icon">🦠</div>
+              <h3 className="virus-title">О НЕТ! ВЫ СКАЧАЛИ ВИРУС!</h3>
+              <p>Вы скачали файл с поддельного сайта. Это вредоносное ПО!</p>
+              <p>Никогда не скачивайте файлы с непроверенных сайтов и не переходите по подозрительным ссылкам!</p>
+              <div className="modal-data virus-data">
+                <strong>Что произошло:</strong><br/>
+                - Ваш компьютер заражен трояном<br/>
+                - Данные могли быть украдены<br/>
+                - Рекомендуется немедленно запустить антивирус<br/>
+                - Не вводите пароли на подозрительных сайтах
+              </div>
+              <button onClick={() => { setShowVirusModal(false); setCurrentPage('yandex'); }} className="modal-btn virus-btn">Я понял, больше так не буду</button>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (currentPage === 'telelitra') {
+    return (
+      <div className="app">
+        <div className="header-with-back secure-header">
+          <div className="secure-badge">
+            <SecureIcon />
+            <span>Защищенное соединение</span>
+          </div>
+          <button className="back-btn" onClick={() => setCurrentPage('searchResults')}>
+            <BackIcon />
+            Назад к результатам
+          </button>
+        </div>
+        <div className="telelitra-page">
+          <div className="telelitra-content">
+            <h1 className="telelitra-title">✅ ТелеЛитр - Официальный сайт</h1>
+            <div className="secure-box">
+              <p>🔒 SSL Сертификат подтвержден (Let's Encrypt)</p>
+              <p>Адресная строка: <span className="secure-url">https://tele-litra.gov.ru</span> (защищено)</p>
+              <p>Ваше соединение зашифровано. Сайт официальный и безопасный.</p>
+            </div>
+            <div className="info-section">
+              <h2>Добро пожаловать в ТелеЛитр!</h2>
+              <p>Крупнейшая официальная библиотека электронных книг.</p>
+              <div className="features">
+                <div className="feature">📚 Более 1 миллиона лицензионных книг</div>
+                <div className="feature">🎧 Аудиокниги от официальных издательств</div>
+                <div className="feature">📱 Официальное мобильное приложение</div>
+                <div className="feature">⭐ Рейтинги и отзывы читателей</div>
+                <div className="feature">💰 Бесплатные книги по школьной программе</div>
+                <div className="feature">🎓 Образовательные материалы</div>
+              </div>
+              <button className="register-btn" onClick={() => alert('Добро пожаловать на официальный сайт ТелеЛитр! Здесь безопасно.')}>
+                Зарегистрироваться
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Детали письма
+  if (selectedEmail) {
+    const email = emails.find(e => e.id === selectedEmail);
+    return (
+      <div className="app">
+        <div className="header-with-back">
+          <button className="back-btn" onClick={() => { setSelectedEmail(null); setCurrentPage('email'); }}>
+            <BackIcon />
+            Назад к письмам
+          </button>
+          <button className="back-btn yandex-back" onClick={() => setCurrentPage('yandex')}>
+            🏠 На главную
+          </button>
+        </div>
+        <div className="email-detail">
+          <div className="email-detail-header">
+            <EmailIcon />
+            <h3>{email?.subject}</h3>
+          </div>
+          <p className="email-from"><strong>От:</strong> {email?.from}</p>
+          <p className="email-body">{email?.body}</p>
+          
+          {selectedEmail === 1 && (
+            <div className="phishing-form">
+              <h4>⚠️ Внимание! Подтвердите данные</h4>
+              <input 
+                type="text" 
+                placeholder="Логин" 
+                value={login} 
+                onChange={(e) => setLogin(e.target.value)} 
+                className="input-field" 
+              />
+              <input 
+                type="password" 
+                placeholder="Пароль" 
+                value={password} 
+                onChange={(e) => setPassword(e.target.value)} 
+                className="input-field" 
+              />
+              <button onClick={handlePhishingSubmit} className="phishing-btn">Подтвердить</button>
+            </div>
+          )}
+
+          {selectedEmail === 2 && (
+            <div className="gosuslugi-link">
+              <button onClick={() => setCurrentPage('gosuslugi')} className="gosuslugi-nav-btn">
+                <GosuslugiIcon />
+                Перейти на сайт Госуслуг
+              </button>
+            </div>
+          )}
+        </div>
+
+        {showPhishingModal && (
+          <div className="modal-overlay">
+            <div className="modal">
+              <h3 className="modal-title">😱 О нет! Ваши данные украдены!</h3>
+              <p>Вы ввели логин и пароль на поддельном сайте.</p>
+              <p>Никогда не переходите по подозрительным ссылкам из писем!</p>
+              <div className="modal-data">
+                <strong>Украденные данные:</strong><br/>
+                Логин: {login}<br/>
+                Пароль: {password}
+              </div>
+              <button onClick={() => { setShowPhishingModal(false); setCurrentPage('yandex'); }} className="modal-btn">Понятно</button>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Список писем
+  return (
+    <div className="app">
+      <div className="header-with-back">
+        <button className="back-btn" onClick={() => setCurrentPage('yandex')}>
+          <BackIcon />
+          Назад к Яндекс
+        </button>
+      </div>
+      <div className="email-list">
+        <h2>Входящие</h2>
+        {emails.map(email => (
+          <div key={email.id} className="email-item" onClick={() => setSelectedEmail(email.id)}>
+            <div className="email-icon">
+              <EmailIcon />
+            </div>
+            <div className="email-info">
+              <strong>{email.from}</strong>
+              <p>{email.subject}</p>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };