bump Yandex browser emulator
This commit is contained in:
parent
1353098877
commit
823bfff531
2 changed files with 1228 additions and 12 deletions
|
|
@ -1,5 +1,813 @@
|
||||||
.yandex {
|
/* * {
|
||||||
width: 100%;
|
margin: 0;
|
||||||
height: 100%;
|
padding: 0;
|
||||||
background: url("/yandex_search.jpg");
|
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;
|
||||||
}
|
}
|
||||||
|
|
@ -1,12 +1,420 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Yandex.css';
|
import './Yandex.css';
|
||||||
|
|
||||||
const YandexApp: React.FC = () => {
|
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 (
|
return (
|
||||||
<div className='yandex'>
|
<div className="app">
|
||||||
{/* <h1>Vscode</h1>
|
<div className="yandex-page">
|
||||||
<button>1</button>
|
<h1 className="yandex-logo">Яндекс</h1>
|
||||||
<button>22</button> */}
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue