phishing_email.html
Atualizado em
26/02/2026 15h34
phishing_email.html
— 93 KB
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phishing Mail - Treinamento de Segurança</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f5f5;
height: 100vh;
overflow: hidden;
}
.email-client {
display: flex;
height: 100vh;
background: white;
}
.sidebar {
width: 250px;
background: #f8f9fa;
border-right: 1px solid #dee2e6;
display: flex;
flex-direction: column;
}
.logo-area {
padding: 20px;
background: #667eea;
color: white;
text-align: center;
}
.logo-area h1 {
font-size: 1.4rem;
margin-bottom: 5px;
}
.logo-area p {
font-size: 0.8rem;
opacity: 0.9;
}
.menu-section {
padding: 20px 15px;
flex: 1;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 15px;
margin: 5px 0;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.menu-item:hover {
background: #e9ecef;
}
.menu-item.active {
background: #667eea;
color: white;
}
.menu-item i {
margin-right: 10px;
width: 16px;
}
.stats-section {
padding: 15px;
background: #fff;
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
}
.stat-item {
display: flex;
justify-content: space-between;
margin: 8px 0;
font-size: 0.85rem;
}
.stat-value {
font-weight: bold;
color: #667eea;
}
.inbox-area {
flex: 1;
display: flex;
flex-direction: column;
}
.toolbar {
padding: 15px 20px;
background: #fff;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
}
.toolbar h2 {
font-size: 1.5rem;
color: #495057;
}
.toolbar-actions {
display: flex;
gap: 10px;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5a6fd8;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-success {
background: #28a745;
color: white;
}
.btn-warning {
background: #ffc107;
color: #212529;
}
.btn:disabled {
background: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
.email-list {
flex: 1;
overflow-y: auto;
background: #fff;
}
.email-item {
display: flex;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f1f3f4;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.email-item:hover {
background: #f8f9fa;
}
.email-item.unread {
background: #fff;
font-weight: 600;
}
.email-item.unread::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #667eea;
}
.email-item.phishing {
border-left: 4px solid #dc3545;
}
.email-item.selected {
background: #e3f2fd;
border-left: 4px solid #2196f3;
}
.email-item.read-only {
opacity: 0.8;
background: #f8f9fa;
}
.email-item.read-only::after {
content: '👁️ Somente Leitura';
position: absolute;
top: 5px;
right: 10px;
background: #6c757d;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: normal;
}
.email-checkbox {
margin-right: 15px;
}
.email-info {
flex: 1;
min-width: 0;
}
.email-sender {
font-weight: 600;
color: #212529;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.email-subject {
color: #495057;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.email-preview {
color: #6c757d;
font-size: 0.85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.email-meta {
text-align: right;
color: #6c757d;
font-size: 0.8rem;
margin-left: 15px;
}
.email-time {
margin-bottom: 4px;
}
.email-flags {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.email-item.read {
background: #f8f9fa;
font-weight: normal;
opacity: 0.8;
}
.email-item.read .email-sender,
.email-item.read .email-subject {
color: #6c757d;
}
.flag {
width: 12px;
height: 12px;
border-radius: 2px;
display: inline-block;
}
.flag.urgent {
background: #dc3545;
}
.flag.important {
background: #ffc107;
}
.email-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 1500;
display: none;
flex-direction: column;
animation: slideInFromRight 0.3s ease;
}
.email-fullscreen.active {
display: flex;
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.email-toolbar {
background: #f8f9fa;
padding: 15px 20px;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.email-toolbar-left {
display: flex;
align-items: center;
gap: 15px;
}
.back-btn {
background: none;
border: 1px solid #dee2e6;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.back-btn:hover {
background: #e9ecef;
}
.toolbar-btn {
background: none;
border: 1px solid #dee2e6;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.toolbar-btn:hover {
background: #e9ecef;
}
.toolbar-btn.danger {
background: #dc3545;
color: white;
border-color: #dc3545;
}
.toolbar-btn.danger:hover {
background: #c82333;
}
.fullscreen-content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.email-header {
padding: 20px 25px;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.email-subject-line {
font-size: 1.4rem;
font-weight: 600;
color: #212529;
margin-bottom: 15px;
line-height: 1.3;
}
.email-details {
display: grid;
gap: 8px;
font-size: 0.9rem;
}
.email-detail {
display: flex;
gap: 10px;
}
.detail-label {
font-weight: 600;
color: #495057;
min-width: 80px;
}
.detail-value {
color: #6c757d;
flex: 1;
word-break: break-all;
}
.suspicious-domain {
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
padding: 2px 4px;
border-radius: 3px;
font-weight: 600;
}
.email-content {
flex: 1;
padding: 25px;
overflow-y: auto;
line-height: 1.6;
}
.email-body {
max-width: 700px;
}
.email-body p {
margin-bottom: 15px;
}
.email-body a {
color: #007bff;
text-decoration: none;
position: relative;
}
.email-body a:hover {
text-decoration: underline;
}
.suspicious-link {
background: rgba(220, 53, 69, 0.1);
color: #dc3545 !important;
padding: 2px 4px;
border-radius: 3px;
border: 1px dashed #dc3545;
}
.email-actions {
padding: 20px 25px;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
display: flex;
gap: 10px;
justify-content: center;
}
.email-actions.read-only {
background: #e9ecef;
border-top: 2px solid #6c757d;
}
.email-actions.read-only::before {
content: "📖 Este email está em modo de leitura apenas. Não é possível pontuar novamente.";
display: block;
text-align: center;
color: #6c757d;
font-weight: 600;
margin-bottom: 15px;
padding: 10px;
background: rgba(108, 117, 125, 0.1);
border-radius: 5px;
}
.security-alert {
background: linear-gradient(45deg, #ff6b6b, #ee5a5a);
color: white;
padding: 12px 20px;
border-radius: 8px;
margin: 15px 25px;
text-align: center;
font-weight: 600;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
animation: pulse 2s infinite;
}
.security-alert.warning {
background: linear-gradient(45deg, #ffc107, #ffb400);
color: #212529;
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
.security-alert.safe {
background: linear-gradient(45deg, #28a745, #20a03a);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: #333;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1000;
bottom: 125%;
left: 50%;
margin-left: -150px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8rem;
line-height: 1.4;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.no-email-selected {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
color: #6c757d;
text-align: center;
}
.no-email-selected h3 {
margin-bottom: 10px;
font-size: 1.5rem;
}
.notification-toast {
position: fixed;
top: 20px;
right: 20px;
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 15px 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
z-index: 1000;
max-width: 400px;
animation: slideInRight 0.3s ease;
}
.notification-toast.success {
border-left: 4px solid #28a745;
}
.notification-toast.error {
border-left: 4px solid #dc3545;
}
.notification-toast.warning {
border-left: 4px solid #ffc107;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.phishing-indicator {
position: absolute;
top: 10px;
right: 10px;
background: #dc3545;
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
animation: blink 1s infinite;
}
.feedback-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 1600;
display: none;
flex-direction: column;
overflow-x: auto;
animation: slideInFromBottom 0.4s ease;
}
.feedback-screen.active {
display: flex;
}
@keyframes slideInFromBottom {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.feedback-header {
background: #f8f9fa;
padding: 20px 30px;
border-bottom: 1px solid #dee2e6;
text-align: center;
}
.feedback-header.correct {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
}
.feedback-header.incorrect {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
color: #721c24;
}
.feedback-header.cautious {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
color: #856404;
}
.feedback-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.feedback-icon {
font-size: 4rem;
margin-bottom: 20px;
}
.feedback-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 15px;
}
.feedback-message {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 30px;
color: #495057;
}
.feedback-explanation {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin: 20px 0;
text-align: left;
width: 100%;
max-width: 600px;
}
.feedback-explanation h4 {
color: #495057;
margin-bottom: 15px;
font-size: 1.1rem;
}
.feedback-flags {
list-style: none;
margin: 15px 0;
}
.feedback-flags li {
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
color: #666;
}
.feedback-flags li:last-child {
border-bottom: none;
}
.red-flag-item {
color: #dc3545;
}
.red-flag-item::before {
content: "🚩 ";
}
.green-flag-item {
color: #28a745;
}
.green-flag-item::before {
content: "✅ ";
}
.score-update {
background: rgba(102, 126, 234, 0.1);
border: 2px solid #667eea;
border-radius: 10px;
padding: 15px 25px;
margin: 20px 0;
font-weight: bold;
font-size: 1.1rem;
}
.score-update.positive {
background: rgba(40, 167, 69, 0.1);
border-color: #28a745;
color: #155724;
}
.score-update.negative {
background: rgba(220, 53, 69, 0.1);
border-color: #dc3545;
color: #721c24;
}
.feedback-actions {
padding: 30px;
text-align: center;
border-top: 1px solid #dee2e6;
}
.continue-btn {
background: #667eea;
color: white;
border: none;
padding: 15px 40px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.continue-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.tutorial-content {
background: white;
border-radius: 12px;
padding: 30px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.tutorial-content h2 {
color: #667eea;
margin-bottom: 20px;
text-align: center;
}
.final-results {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #667eea;
z-index: 1700;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
animation: fadeIn 0.5s ease;
}
.final-results.active {
display: flex;
overflow: auto;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.results-content {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 50px;
max-width: 600px;
width: 90%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.results-title {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.results-subtitle {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.9;
}
.results-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin: 30px 0;
}
.stat-box {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
.performance-grade {
font-size: 4rem;
margin: 30px 0 20px 0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.email-item:hover {
background: #e2e6ea; /* Cinza mais escuro para destaque */
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08); /* Leve sombra para profundidade */
transition: background 0.2s, box-shadow 0.2s;
}
.grade-a {
color: #28a745;
}
.grade-b {
color: #17a2b8;
}
.grade-c {
color: #ffc107;
}
.grade-d {
color: #fd7e14;
}
.grade-f {
color: #dc3545;
}
.performance-message {
font-size: 1.2rem;
margin: 20px 0;
line-height: 1.6;
}
.restart-btn {
background: linear-gradient(45deg, #28a745, #20c997);
color: white;
border: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}
/* Link próxima fase */
.next-phase-link {
display: inline-block;
text-decoration: none;
background: linear-gradient(90deg,#ff7e5f,#feb47b);
color: #1d1d1d;
font-weight: 600;
padding: 12px 26px;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
transition: transform .25s, box-shadow .25s;
}
.next-phase-link:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
/* Responsividade */
/* Responsividade */
@media (max-width: 1200px) {
.email-client {
flex-direction: column;
height: 100vh;
}
.sidebar {
width: 100%;
height: auto;
flex-direction: column;
flex-shrink: 0;
border-right: none;
border-bottom: 1px solid #dee2e6;
}
.logo-area {
padding: 15px 20px;
}
.logo-area h1 {
font-size: 1.2rem;
margin-bottom: 0;
}
.logo-area p {
display: none;
}
.menu-section {
display: flex;
gap: 8px;
padding: 10px 15px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.menu-section::-webkit-scrollbar {
display: none;
}
.menu-item {
flex-shrink: 0;
padding: 8px 12px;
font-size: 0.8rem;
white-space: nowrap;
}
.stats-section {
display: none;
}
.inbox-area {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.toolbar {
flex-shrink: 0;
padding: 12px 15px;
}
.toolbar h2 {
font-size: 1.1rem;
}
.email-list {
flex: 1;
overflow-y: auto;
min-height: 0;
}
}
@media (max-width: 768px) {
.email-item {
padding: 12px 15px;
}
.email-meta {
display: none;
}
.email-subject {
font-size: 0.9rem;
}
.email-preview {
font-size: 0.8rem;
}
.email-content {
padding: 20px 15px;
}
.email-header {
padding: 15px;
}
.email-subject-line {
font-size: 1.3rem !important;
}
.email-actions {
padding: 15px;
}
.email-actions > div:first-child {
font-size: 0.9rem;
margin-bottom: 12px;
}
.email-actions .btn {
min-width: 120px !important;
padding: 10px 15px;
font-size: 0.8rem;
}
}
</style>
</head>
<body>
<div class="email-client">
<!-- Sidebar -->
<div class="sidebar">
<div class="logo-area">
<h1>Phishing Mail</h1>
<p>Treinamento de Segurança</p>
</div>
<div class="menu-section">
<div class="menu-item active" onclick="showInbox()">
📧 Caixa de Entrada <span id="unreadCount">(5)</span>
</div>
<div class="menu-item" onclick="showReadEmails()">
📖 Emails Lidos <span id="readCount">(0)</span>
</div>
<div class="menu-item" onclick="showSpam()">
🚫 Spam/Phishing <span id="spamCount">(0)</span>
</div>
<div class="menu-item" onclick="showTutorial()">
📚 Tutorial
</div>
</div>
<div class="stats-section">
<div class="stat-item">
<span>Pontuação:</span>
<span class="stat-value" id="scoreValue">0</span>
</div>
<div class="stat-item">
<span>Precisão:</span>
<span class="stat-value" id="accuracyValue">100%</span>
</div>
<div class="stat-item">
<span>Ameaças Bloqueadas:</span>
<span class="stat-value" id="threatsValue">0</span>
</div>
</div>
</div>
<!-- Lista de Emails -->
<div class="inbox-area">
<div class="toolbar">
<h2 id="currentFolderTitle">Caixa de Entrada</h2>
</div>
<div class="email-list" id="emailList">
<!-- Emails serão inseridos aqui dinamicamente -->
</div>
</div>
</div>
<!-- Email em Tela Cheia -->
<div class="email-fullscreen" id="emailFullscreen">
<div class="email-toolbar">
<div class="email-toolbar-left">
<button class="back-btn" onclick="closeFullscreenEmail()">
← Voltar para <span id="backToFolder">Caixa de Entrada</span>
</button>
<span id="emailCounter"></span>
</div>
</div>
<div class="fullscreen-content" id="fullscreenContent">
<!-- Conteúdo do email será inserido aqui -->
</div>
<div class="email-actions" id="emailActions"
style="padding: 20px; background: #f8f9fa; border-top: 1px solid #dee2e6;">
<div style="text-align: center; margin-bottom: 15px;">
<strong>Este email é legítimo ou uma tentativa de phishing?</strong>
</div>
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
<button class="btn btn-danger" onclick="markAsPhishing()" style="min-width: 150px;">
🚫 É PHISHING
</button>
<button class="btn btn-success" onclick="markAsLegitimate()" style="min-width: 150px;">
✅ É LEGÍTIMO
</button>
<button class="btn btn-warning" onclick="markAsUnsure()" style="min-width: 150px;">
❓ NÃO TENHO CERTEZA
</button>
</div>
</div>
</div>
<!-- Tela de Resultados Finais -->
<div class="final-results" id="finalResults">
<div class="results-content">
<!-- Conteúdo será inserido dinamicamente -->
</div>
</div>
<div class="feedback-screen" id="feedbackScreen">
<div class="feedback-header" id="feedbackHeader">
<h2 id="feedbackHeaderTitle">Resultado da Análise</h2>
</div>
<div class="feedback-content">
<div class="feedback-icon" id="feedbackIcon">🎯</div>
<div class="feedback-title" id="feedbackTitle">Excelente Detecção!</div>
<div class="feedback-message" id="feedbackMessage">Você identificou corretamente este email como phishing.
</div>
<div class="score-update" id="scoreUpdate">
+150 pontos adicionados à sua pontuação!
</div>
<div class="feedback-explanation" id="feedbackExplanation">
<h4>Por que este email é suspeito?</h4>
<ul class="feedback-flags" id="feedbackFlags">
<li class="red-flag-item">Domínio falso que imita empresa real</li>
<li class="red-flag-item">Urgência artificial para pressionar decisão</li>
<li class="red-flag-item">Solicitação de informações confidenciais</li>
</ul>
</div>
</div>
<div class="feedback-actions">
<button class="continue-btn" onclick="closeFeedbackScreen()">
Voltar para Caixa de Entrada
</button>
</div>
</div>
<!-- Tutorial Overlay -->
<div class="tutorial-overlay" id="tutorialOverlay"
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 2000; display: none; justify-content: center; align-items: center;">
<div class="tutorial-content">
<h2>Como Usar o Phishing Mail</h2>
<div class="tutorial-step">
<h4>1. Abra o Email</h4>
<p>Clique no email que preferir</p>
</div>
<br>
<div class="tutorial-step">
<h4>2. Analise Cuidadosamente</h4>
<p>Examine o remetente, assunto, conteúdo e links. Procure por:</p>
<ul style="margin-left: 40px;">
<li>Domínios suspeitos (ex: amazom.com ao invés de amazon.com)</li>
<li>Erros de português</li>
<li>Urgência excessiva</li>
<li>Pedidos de informações pessoais</li>
</ul>
</div>
<br>
<div class="tutorial-step">
<h4>3. Tome Sua Decisão</h4>
<p>Use os botões na parte inferior do email:</p>
<ul style="margin-left: 40px;">
<li><strong>🚫 É Phishing:</strong> Se identificar como fraude</li>
<li><strong>✅ É Legítimo:</strong> Se considerar seguro</li>
<li><strong>❓ Não Tenho Certeza:</strong> Se tiver dúvidas</li>
</ul>
</div>
<br>
<div class="tutorial-step">
<h4>4. Ganhe Pontos</h4>
<p>Decisões corretas rendem pontos. Erros diminuem sua pontuação.</p>
</div>
<br>
<div class="tutorial-step">
<h4>5. É possível rever os email</h4>
<p>Caso deseje rever algum email, clique em 'spam/phishing' ou 'Emails Lidos'</p>
</div>
<div style="text-align: center; margin-top: 20px;">
<button class="btn btn-primary" onclick="closeTutorial()">Começar Treinamento!</button>
</div>
</div>
</div>
<script>
// Estado do jogo
let gameState = {
score: 0,
correctDecisions: 0,
totalDecisions: 0,
threatsBlocked: 0,
selectedEmail: null,
emails: [],
readEmails: [],
spamEmails: [],
currentView: 'inbox',
gameComplete: false,
maxEmails: 10
};
// Base de dados de emails realistas (expandida)
const emailDatabase = [
{
id: 1,
isPhishing: true,
sender: 'seguranca@bancodobrasil-verificacao.com',
subject: 'URGENTE: Confirme seus dados ou sua conta será bloqueada',
time: '09:15',
preview: 'Detectamos atividade suspeita em sua conta. Clique aqui para verificar...',
content: `
<p>Prezado(a) cliente,</p>
<p>Detectamos uma tentativa de acesso não autorizado em sua conta do Banco do Brasil.</p>
<p>Para garantir sua segurança, é <strong>OBRIGATÓRIO</strong> que você confirme suas informações em até 24 horas.</p>
<p><a href="#" class="suspicious-link">CLIQUE AQUI PARA VERIFICAR SUA CONTA AGORA</a></p>
<p>Caso não confirme, sua conta será <span style="color: red; font-weight: bold;">PERMANENTEMENTE BLOQUEADA</span>.</p>
<p>Atenciosamente,<br>Central de Segurança</p>
`,
flags: ['urgent'],
explanation: 'Este é um phishing clássico! O domínio "bancodobrasil-verificacao.com" não é oficial. O BB nunca pede confirmação de dados por email.',
redFlags: [
'Domínio falso: bancodobrasil-verificacao.com',
'Urgência artificial com ameaças',
'Solicita clique em link suspeito',
'Linguagem intimidadora'
]
},
{
id: 2,
isPhishing: false,
sender: 'noreply@netflix.com',
subject: 'Sua fatura mensal da Netflix',
time: '08:30',
preview: 'Olá João, sua fatura do plano Padrão no valor de R$ 27,90 está disponível...',
content: `
<p>Olá João Silva,</p>
<p>Sua fatura mensal da Netflix está pronta para visualização.</p>
<p><strong>Detalhes da Fatura:</strong></p>
<ul>
<li>Plano: Padrão (2 telas)</li>
<li>Período: 15/07/2025 - 14/08/2025</li>
<li>Valor: R$ 27,90</li>
</ul>
<p>O pagamento será debitado automaticamente do cartão final 1234 em 15/07/2025.</p>
<p>Para alterar seu plano ou forma de pagamento, acesse sua conta Netflix.</p>
<p>Obrigado por ser nosso assinante!</p>
<p>Equipe Netflix</p>
`,
flags: [],
explanation: 'Email legítimo da Netflix com informações específicas da conta e sem solicitações suspeitas.',
greenFlags: [
'Domínio oficial: netflix.com',
'Informações específicas da conta',
'Não solicita ação urgente',
'Linguagem profissional'
]
},
{
id: 3,
isPhishing: true,
sender: 'promocoes@mercad0livre.com.br',
subject: '🎉 PARABÉNS! Você ganhou um iPhone 15 Pro Max!',
time: '14:22',
preview: 'Você foi selecionado para ganhar um iPhone 15 Pro Max! Clique para resgatar...',
content: `
<h2 style="color: gold;">🎉 PARABÉNS! VOCÊ GANHOU! 🎉</h2>
<p>Você foi um dos <strong>3 sortudos</strong> selecionados para ganhar um iPhone 15 Pro Max!</p>
<p>Para resgatar seu prêmio, você precisa:</p>
<ol>
<li>Clicar no link abaixo em até 30 minutos</li>
<li>Pagar apenas R$ 15,90 de taxa de envio</li>
<li>Informar seus dados para entrega</li>
</ol>
<p style="background: yellow; padding: 10px; text-align: center;">
<a href="#" class="suspicious-link">🏆 RESGATAR MEU iPHONE GRÁTIS AGORA! 🏆</a>
</p>
<p><small>Promoção válida apenas hoje! Restam apenas 29 minutos!</small></p>
`,
flags: ['urgent'],
explanation: 'Golpe clássico! Note o "0" (zero) no lugar do "o" em "mercad0livre". Ofertas "grátis" que pedem pagamento são sempre fraude.',
redFlags: [
'Domínio falso: mercad0livre.com.br (com zero)',
'Oferta impossível de ser verdade',
'Urgência artificial (30 minutos)',
'Pede pagamento para "prêmio grátis"'
]
},
{
id: 4,
isPhishing: false,
sender: 'contato@magazineluiza.com.br',
subject: 'Confirmação de Entrega - Pedido #ML123456789',
time: '16:45',
preview: 'Seu pedido foi entregue com sucesso! Smartphone Samsung Galaxy...',
content: `
<p>Olá Maria Santos,</p>
<p>Confirmamos que seu pedido foi entregue com sucesso!</p>
<p><strong>Detalhes da Entrega:</strong></p>
<ul>
<li>Pedido: #ML123456789</li>
<li>Data da Entrega: 21/07/2025 às 14:30</li>
<li>Recebido por: Maria Santos</li>
<li>Endereço: Rua das Flores, 123 - São Paulo/SP</li>
</ul>
<p><strong>Produto:</strong> Smartphone Samsung Galaxy A54 5G 128GB</p>
<p>Esperamos que esteja satisfeita com sua compra! Se tiver alguma dúvida, entre em contato conosco.</p>
<p>Obrigado por escolher o Magazine Luiza!</p>
`,
flags: [],
explanation: 'Email legítimo de confirmação de entrega com todas as informações corretas e domínio oficial.',
greenFlags: [
'Domínio oficial: magazineluiza.com.br',
'Informações específicas do pedido',
'Dados pessoais corretos',
'Sem solicitações suspeitas'
]
},
{
id: 5,
isPhishing: true,
sender: 'suporte@whatsapp-seguranca.com',
subject: 'Sua conta WhatsApp será deletada em 24h',
time: '11:30',
preview: 'ATENÇÃO: Detectamos uso não autorizado. Confirme sua identidade para evitar...',
content: `
<div style="border: 3px solid red; padding: 15px; background: #ffe6e6;">
<h3 style="color: red;">⚠️ ALERTA DE SEGURANÇA ⚠️</h3>
<p>Detectamos que sua conta WhatsApp está sendo usada em outro dispositivo sem autorização.</p>
<p>Para evitar que sua conta seja <strong>PERMANENTEMENTE DELETADA</strong>, confirme sua identidade:</p>
<p style="text-align: center; background: green; color: white; padding: 10px;">
<a href="#" class="suspicious-link" style="color: white;">CONFIRMAR MINHA CONTA AGORA</a>
</p>
<p style="color: red;"><strong>ATENÇÃO:</strong> Você tem apenas 24 horas para confirmar!</p>
<p>Caso não confirme, perderá todas as suas conversas e contatos.</p>
</div>
`,
flags: ['urgent'],
explanation: 'Golpe! WhatsApp não envia emails de segurança. Note o domínio suspeito e a urgência excessiva.',
redFlags: [
'WhatsApp não envia emails de segurança',
'Domínio suspeito: whatsapp-seguranca.com',
'Ameaças de deletar conta',
'Design suspeito com cores chamativas'
]
},
// Novos emails para completar 15+ opções
{
id: 6,
isPhishing: true,
sender: 'noreply@paypaI-security.com',
subject: 'Ação necessária: Verifique sua conta PayPal',
time: '13:22',
preview: 'Sua conta foi temporariamente limitada. Verifique agora para restaurar o acesso...',
content: `
<p>Caro usuário,</p>
<p>Detectamos atividade incomum em sua conta PayPal e temporariamente limitamos algumas funcionalidades para sua proteção.</p>
<p>Para restaurar o acesso completo à sua conta, clique no link abaixo e forneça as informações solicitadas:</p>
<p><a href="#" class="suspicious-link">Verificar Minha Conta PayPal</a></p>
<p>Se você não verificar sua conta em 48 horas, ela poderá ser permanentemente suspensa.</p>
<p>Obrigado,<br>Equipe de Segurança PayPal</p>
`,
flags: ['urgent'],
explanation: 'Phishing imitando PayPal. Note o "I" maiúsculo no lugar do "l" em "paypaI-security.com".',
redFlags: [
'Domínio falso: paypaI-security.com (com I maiúsculo)',
'PayPal nunca pede verificação por email',
'Ameaça de suspensão permanente',
'Linguagem genérica "Caro usuário"'
]
},
{
id: 7,
isPhishing: false,
sender: 'confirmacao@amazon.com.br',
subject: 'Seu pedido foi confirmado - #123-4567890-1234567',
time: '10:15',
preview: 'Olá João, confirmamos seu pedido de R$ 89,90. Entrega prevista para amanhã...',
content: `
<p>Olá João Silva,</p>
<p>Obrigado por seu pedido na Amazon!</p>
<p><strong>Detalhes do Pedido:</strong></p>
<ul>
<li>Número: #123-4567890-1234567</li>
<li>Data: 21 de julho de 2025</li>
<li>Total: R$ 89,90</li>
</ul>
<p><strong>Produto:</strong> Echo Dot (5ª Geração) com Alexa</p>
<p><strong>Endereço de entrega:</strong><br>
João Silva<br>
Rua das Palmeiras, 456<br>
São Paulo, SP 01234-567</p>
<p>Sua entrega está prevista para: <strong>22 de julho de 2025</strong></p>
<p>Você receberá um e-mail de confirmação quando seu pedido for enviado.</p>
`,
flags: [],
explanation: 'Email legítimo da Amazon com número de pedido válido e informações específicas.',
greenFlags: [
'Domínio oficial: amazon.com.br',
'Número de pedido detalhado',
'Informações pessoais específicas',
'Não solicita ações ou cliques'
]
},
{
id: 8,
isPhishing: true,
sender: 'security@microsoft-office365.com',
subject: 'Tentativa de login suspeita detectada',
time: '07:45',
preview: 'Detectamos uma tentativa de login de um local não reconhecido. Proteja sua conta...',
content: `
<p>Prezado usuário,</p>
<p>Detectamos uma tentativa de login em sua conta Microsoft de um local não reconhecido:</p>
<p><strong>Local:</strong> Moscou, Rússia<br>
<strong>Dispositivo:</strong> Windows PC<br>
<strong>Data:</strong> 21 de julho de 2025, 07:30</p>
<p>Se esta tentativa de login não foi feita por você, sua conta pode estar comprometida.</p>
<p style="text-align: center; margin: 20px 0;">
<a href="#" class="suspicious-link" style="background: #0078d4; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px;">Proteger Minha Conta</a>
</p>
<p>Recomendamos que você altere sua senha imediatamente.</p>
<p>Atenciosamente,<br>Equipe de Segurança Microsoft</p>
`,
flags: ['urgent'],
explanation: 'Phishing imitando Microsoft. O domínio "microsoft-office365.com" não é oficial.',
redFlags: [
'Domínio falso: microsoft-office365.com',
'Microsoft usa "security.microsoft.com"',
'Cria pânico com "conta comprometida"',
'Botão suspeito para "proteger conta"'
]
},
{
id: 9,
isPhishing: false,
sender: 'comunicacao@itau.com.br',
subject: 'Extrato mensal da sua conta corrente',
time: '09:00',
preview: 'Seu extrato de julho/2025 já está disponível no app e internet banking...',
content: `
<p>Olá, Maria Silva</p>
<p>Seu extrato mensal de julho/2025 da conta corrente já está disponível.</p>
<p><strong>Conta:</strong> 1234-5 / 67890-1<br>
<strong>Período:</strong> 01/07/2025 a 31/07/2025</p>
<p>Para visualizar seu extrato completo, acesse:</p>
<ul>
<li>Aplicativo Itaú</li>
<li>Internet Banking no site oficial</li>
<li>Caixas eletrônicos Itaú</li>
</ul>
<p>Lembramos que nunca solicitamos senhas, dados pessoais ou confirmações por e-mail.</p>
<p>Atenciosamente,<br>Banco Itaú</p>
`,
flags: [],
explanation: 'Email legítimo do Itaú que não solicita cliques e lembra sobre segurança.',
greenFlags: [
'Domínio oficial: itau.com.br',
'Não solicita cliques em links',
'Lembra sobre não solicitar dados por email',
'Oferece canais oficiais para acesso'
]
},
{
id: 10,
isPhishing: true,
sender: 'naoresponda@receita-federal.gov.br.secure.com',
subject: 'Restituição do Imposto de Renda disponível',
time: '15:30',
preview: 'Você tem direito a uma restituição de R$ 1.247,83. Clique aqui para receber...',
content: `
<div style="background: #f0f8ff; padding: 20px; border-left: 5px solid #007700;">
<h3 style="color: #007700;">✅ RESTITUIÇÃO APROVADA</h3>
<p>Prezado(a) contribuinte,</p>
<p>Informamos que sua declaração de Imposto de Renda foi processada e você tem direito a uma restituição no valor de <strong>R$ 1.247,83</strong>.</p>
<p>Para receber sua restituição, é necessário confirmar seus dados bancários:</p>
<p style="text-align: center; margin: 20px 0;">
<a href="#" class="suspicious-link" style="background: #28a745; color: white; padding: 15px 30px; text-decoration: none; border-radius: 8px;">RECEBER RESTITUIÇÃO</a>
</p>
<p><small>Esta restituição expira em 15 dias. Não perca esta oportunidade!</small></p>
<p>Receita Federal do Brasil</p>
</div>
`,
flags: ['important'],
explanation: 'Golpe imitando Receita Federal. O domínio real seria "gov.br" diretamente.',
redFlags: [
'Domínio falso: receita-federal.gov.br.secure.com',
'Receita Federal não envia emails sobre restituição',
'Solicita confirmação de dados bancários',
'Cria urgência com "expira em 15 dias"'
]
},
{
id: 11,
isPhishing: false,
sender: 'atendimento@santander.com.br',
subject: 'Alteração de limite pré-aprovada',
time: '11:45',
preview: 'Informamos que sua solicitação de alteração de limite foi aprovada...',
content: `
<p>Prezado cliente João Silva,</p>
<p>Informamos que sua solicitação de alteração de limite do cartão de crédito foi <strong>aprovada</strong>.</p>
<p><strong>Detalhes da alteração:</strong></p>
<ul>
<li>Cartão: Final 4567</li>
<li>Limite anterior: R$ 2.000,00</li>
<li>Novo limite: R$ 3.500,00</li>
<li>Data de vigência: 25/07/2025</li>
</ul>
<p>O novo limite estará disponível a partir da data de vigência e aparecerá em sua próxima fatura.</p>
<p>Para dúvidas, entre em contato através dos nossos canais oficiais ou visite uma agência.</p>
<p>Atenciosamente,<br>Banco Santander</p>
`,
flags: [],
explanation: 'Email legítimo do Santander informando sobre alteração solicitada pelo cliente.',
greenFlags: [
'Domínio oficial: santander.com.br',
'Informações específicas do cliente',
'Não solicita ações ou cliques',
'Informa sobre serviço já solicitado'
]
},
{
id: 12,
isPhishing: true,
sender: 'update@facebook-security.net',
subject: 'Ação necessária: Sua conta Facebook expira hoje',
time: '18:20',
preview: 'Sua conta Facebook será desativada permanentemente se você não confirmar...',
content: `
<div style="background: #1877f2; color: white; padding: 20px; text-align: center;">
<h2>facebook</h2>
</div>
<div style="padding: 20px;">
<p>Olá,</p>
<p>Sua conta Facebook será <strong style="color: red;">DESATIVADA PERMANENTEMENTE</strong> em algumas horas devido a violação dos nossos termos de uso.</p>
<p>Alguém reportou sua conta por:</p>
<ul>
<li>Spam</li>
<li>Conteúdo inadequado</li>
<li>Fake news</li>
</ul>
<p>Para manter sua conta ativa, confirme sua identidade imediatamente:</p>
<p style="text-align: center; margin: 20px 0;">
<a href="#" class="suspicious-link" style="background: #1877f2; color: white; padding: 12px 25px; text-decoration: none; border-radius: 6px;">CONFIRMAR IDENTIDADE</a>
</p>
<p><strong>ATENÇÃO:</strong> Você tem apenas 2 horas!</p>
</div>
`,
flags: ['urgent'],
explanation: 'Phishing imitando Facebook. O domínio oficial seria "facebook.com" ou "meta.com".',
redFlags: [
'Domínio falso: facebook-security.net',
'Facebook não envia ameaças de desativação',
'Cria pânico com "2 horas"',
'Design copiado mas domínio suspeito'
]
},
{
id: 13,
isPhishing: false,
sender: 'noreply@google.com',
subject: 'Nova atividade na sua Conta Google',
time: '14:10',
preview: 'Detectamos um novo login na sua conta. Dispositivo: Chrome no Windows...',
content: `
<p>Olá João,</p>
<p>Detectamos um novo login na sua Conta Google.</p>
<p><strong>Detalhes da atividade:</strong></p>
<ul>
<li><strong>Dispositivo:</strong> Chrome no Windows</li>
<li><strong>Local:</strong> São Paulo, São Paulo, Brasil</li>
<li><strong>Data:</strong> 21 de julho de 2025, 14:05</li>
<li><strong>Endereço IP:</strong> 177.12.345.67</li>
</ul>
<p>Se este login foi feito por você, não é necessário fazer nada.</p>
<p>Se você não reconhece esta atividade, recomendamos que:</p>
<ul>
<li>Altere sua senha imediatamente</li>
<li>Revise as configurações de segurança</li>
<li>Ative a verificação em duas etapas</li>
</ul>
<p>Você pode revisar sua atividade recente em myaccount.google.com/security</p>
`,
flags: [],
explanation: 'Email legítimo do Google sobre atividade na conta, com informações detalhadas.',
greenFlags: [
'Domínio oficial: google.com',
'Informações detalhadas sobre o acesso',
'Não força cliques, oferece orientações',
'Direciona para URL oficial do Google'
]
},
{
id: 14,
isPhishing: true,
sender: 'urgent@apple-icloud.support.com',
subject: 'iCloud Storage cheio - Ação imediata necessária',
time: '12:33',
preview: 'Seu armazenamento iCloud está 100% cheio. Atualize agora ou perderá seus dados...',
content: `
<div style="background: #f5f5f7; padding: 20px;">
<div style="text-align: center; margin-bottom: 20px;">
<h2 style="color: #1d1d1f;">🍎 iCloud</h2>
</div>
<h3 style="color: #d70015;">⚠️ ARMAZENAMENTO ESGOTADO</h3>
<p>Seu armazenamento iCloud está completamente cheio (50GB/50GB).</p>
<p>Se você não aumentar seu armazenamento nas próximas 24 horas:</p>
<ul>
<li>Suas fotos serão <strong>permanentemente deletadas</strong></li>
<li>Backups do iPhone serão interrompidos</li>
<li>Emails serão perdidos</li>
</ul>
<p style="text-align: center; margin: 25px 0;">
<a href="#" class="suspicious-link" style="background: #007aff; color: white; padding: 15px 30px; text-decoration: none; border-radius: 10px;">AUMENTAR ARMAZENAMENTO AGORA</a>
</p>
<p><small>Esta oferta especial expira em 24 horas!</small></p>
</div>
`,
flags: ['urgent'],
explanation: 'Phishing imitando Apple. O domínio oficial seria "apple.com" ou "icloud.com".',
redFlags: [
'Domínio falso: apple-icloud.support.com',
'Apple usa domínios oficiais como apple.com',
'Ameaças de perda permanente de dados',
'Urgência artificial de 24 horas'
]
},
{
id: 15,
isPhishing: false,
sender: 'comunicacao@correios.com.br',
subject: 'Objeto postado - Código de rastreamento',
time: '16:55',
preview: 'Confirmamos a postagem do seu objeto. Código: BR123456789BR...',
content: `
<p>Prezado cliente,</p>
<p>Confirmamos que seu objeto foi postado e está em trânsito.</p>
<p><strong>Informações do envio:</strong></p>
<ul>
<li><strong>Código de rastreamento:</strong> BR123456789BR</li>
<li><strong>Data da postagem:</strong> 21/07/2025</li>
<li><strong>Origem:</strong> São Paulo/SP</li>
<li><strong>Destino:</strong> Rio de Janeiro/RJ</li>
<li><strong>Serviço:</strong> SEDEX</li>
<li><strong>Prazo de entrega:</strong> 1 dia útil</li>
</ul>
<p>Você pode acompanhar o status da entrega no site dos Correios ou pelo aplicativo oficial.</p>
<p>Para rastrear, use o código: <strong>BR123456789BR</strong></p>
<p>Atenciosamente,<br>Correios</p>
`,
flags: [],
explanation: 'Email legítimo dos Correios com código de rastreamento válido.',
greenFlags: [
'Domínio oficial: correios.com.br',
'Código de rastreamento no formato correto',
'Informações específicas do envio',
'Não solicita cliques, apenas informa'
]
},
{
id: 16,
isPhishing: true,
sender: 'security@linkedin-verification.org',
subject: 'Confirme seu LinkedIn para evitar suspensão',
time: '19:15',
preview: 'Sua conta LinkedIn precisa ser verificada. Falha na verificação resultará em suspensão...',
content: `
<div style="background: #0077b5; color: white; padding: 15px;">
<h2>in LinkedIn</h2>
<p>Rede Profissional Mundial</p>
</div>
<div style="padding: 20px;">
<p>Olá profissional,</p>
<p>Como parte das nossas medidas de segurança, estamos verificando todas as contas LinkedIn.</p>
<p>Sua conta ainda não foi verificada e precisa passar pelo processo até <strong>23/07/2025</strong>.</p>
<p><strong>Status atual:</strong> ⚠️ Não verificado</p>
<p>Consequências de não verificar:</p>
<ul>
<li>Conta suspensa temporariamente</li>
<li>Perda de conexões</li>
<li>Perfil removido das buscas</li>
</ul>
<p style="text-align: center; margin: 20px 0;">
<a href="#" class="suspicious-link" style="background: #0077b5; color: white; padding: 12px 25px; text-decoration: none; border-radius: 4px;">VERIFICAR MINHA CONTA</a>
</p>
<p>Este processo leva apenas 2 minutos.</p>
</div>
`,
flags: ['urgent'],
explanation: 'Phishing imitando LinkedIn. O domínio oficial é "linkedin.com".',
redFlags: [
'Domínio falso: linkedin-verification.org',
'LinkedIn não força verificação por email',
'Ameaças de suspensão e perda de dados',
'Prazo artificial para criar urgência'
]
},
{
id: 17,
isPhishing: false,
sender: 'noreply@steam.com',
subject: 'Confirmação de compra na Steam',
time: '20:40',
preview: 'Obrigado pela sua compra! Cyberpunk 2077 foi adicionado à sua biblioteca...',
content: `
<p>Olá João,</p>
<p>Obrigado pela sua compra na Steam!</p>
<p><strong>Detalhes da compra:</strong></p>
<ul>
<li><strong>Jogo:</strong> Cyberpunk 2077</li>
<li><strong>Preço:</strong> R$ 99,90</li>
<li><strong>Data:</strong> 21 de julho de 2025, 20:35</li>
<li><strong>Método de pagamento:</strong> Cartão final 1234</li>
<li><strong>ID da transação:</strong> 1234567890123456789</li>
</ul>
<p>O jogo foi automaticamente adicionado à sua biblioteca Steam e já está disponível para download.</p>
<p>Para baixar, abra o cliente Steam e vá para "Biblioteca".</p>
<p>Caso tenha dúvidas, visite nossa central de ajuda no site oficial da Steam.</p>
<p>Bom jogo!<br>Equipe Steam</p>
`,
flags: [],
explanation: 'Email legítimo da Steam confirmando compra com detalhes específicos.',
greenFlags: [
'Domínio oficial: steam.com',
'ID de transação detalhado',
'Informações específicas da compra',
'Não solicita ações, apenas confirma'
]
},
{
id: 18,
isPhishing: true,
sender: 'alert@secure-banking-brasil.com',
subject: 'ALERTA: Transação suspeita de R$ 2.500,00',
time: '08:55',
preview: 'Detectamos uma transação suspeita em sua conta. Confirme se foi você...',
content: `
<div style="background: #dc3545; color: white; padding: 15px; text-align: center;">
<h2>🚨 ALERTA DE SEGURANÇA</h2>
</div>
<div style="padding: 20px; border: 2px solid #dc3545;">
<p>ATENÇÃO!</p>
<p>Detectamos uma transação suspeita em sua conta bancária:</p>
<p><strong>Valor:</strong> R$ 2.500,00<br>
<strong>Comerciante:</strong> Loja Online Suspeita<br>
<strong>Data:</strong> 21/07/2025 - 08:50<br>
<strong>Localização:</strong> Internacional</p>
<p style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107;">
<strong>⚠️ ESTA TRANSAÇÃO FOI VOCÊ?</strong>
</p>
<div style="text-align: center; margin: 20px 0;">
<a href="#" class="suspicious-link" style="background: #28a745; color: white; padding: 15px; margin: 10px; text-decoration: none; border-radius: 5px;">SIM, FUI EU</a>
<a href="#" class="suspicious-link" style="background: #dc3545; color: white; padding: 15px; margin: 10px; text-decoration: none; border-radius: 5px;">NÃO FUI EU</a>
</div>
<p><strong>URGENTE:</strong> Responda em 30 minutos ou sua conta será bloqueada!</p>
</div>
`,
flags: ['urgent'],
explanation: 'Phishing genérico fingindo ser alerta bancário. Bancos não usam domínios genéricos.',
redFlags: [
'Domínio genérico: secure-banking-brasil.com',
'Bancos usam seus domínios oficiais específicos',
'Urgência artificial de 30 minutos',
'Força decisão rápida com medo'
]
}
];
// Inicializar emails
function initializeEmails() {
// Sortear 10 emails aleatórios do banco de dados
const shuffledEmails = [...emailDatabase].sort(() => 0.5 - Math.random());
gameState.emails = shuffledEmails.slice(0, gameState.maxEmails).map((email, index) => ({
...email,
id: Date.now() + index,
time: generateRandomTime()
}));
renderEmailList();
updateStats();
}
// Gerar horário aleatório
function generateRandomTime() {
const hours = Math.floor(Math.random() * 24);
const minutes = Math.floor(Math.random() * 60);
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}
// Renderizar lista de emails
function renderEmailList() {
const emailList = document.getElementById('emailList');
emailList.innerHTML = '';
let emailsToShow = [];
let isReadOnlyView = false;
switch (gameState.currentView) {
case 'inbox':
emailsToShow = gameState.emails;
break;
case 'read':
emailsToShow = gameState.readEmails;
isReadOnlyView = true;
break;
case 'spam':
emailsToShow = gameState.spamEmails;
isReadOnlyView = true;
break;
}
if (emailsToShow.length === 0) {
const emptyMessage = document.createElement('div');
emptyMessage.style.cssText = 'text-align: center; padding: 50px; color: #666;';
if (gameState.currentView === 'inbox' && gameState.gameComplete) {
emptyMessage.innerHTML = '<h3>🎉 Parabéns!</h3><p>Você analisou todos os emails do jogo!</p>';
} else {
const messages = {
'inbox': '<h3>📮 Nenhum email na caixa de entrada</h3><p>Emails não analisados aparecerão aqui</p>',
'read': '<h3>📖 Nenhum email lido ainda</h3><p>Emails marcados como legítimos aparecerão aqui</p>',
'spam': '<h3>🚫 Nenhum spam detectado</h3><p>Emails identificados como phishing aparecerão aqui</p>'
};
emptyMessage.innerHTML = messages[gameState.currentView];
}
emailList.appendChild(emptyMessage);
return;
}
emailsToShow.forEach(email => {
const emailItem = document.createElement('div');
emailItem.className = `email-item`;
if (gameState.currentView === 'inbox') {
emailItem.classList.add('unread');
} else {
emailItem.classList.add('read-only');
}
emailItem.onclick = () => selectEmail(email, isReadOnlyView);
emailItem.innerHTML = `
<input type="checkbox" class="email-checkbox">
<div class="email-info">
<div class="email-sender">${email.sender}</div>
<div class="email-subject">${email.subject}</div>
<div class="email-preview">${email.preview}</div>
</div>
<div class="email-meta">
<div class="email-time">${email.time}</div>
${email.movedToSpam ? `<div style="font-size: 0.7rem; color: #dc3545;">Movido: ${email.movedToSpam}</div>` : ''}
${email.readTime ? `<div style="font-size: 0.7rem; color: #28a745;">Lido: ${email.readTime}</div>` : ''}
</div>
`;
emailList.appendChild(emailItem);
});
updateCounts();
}
// Selecionar email
function selectEmail(email, isReadOnly = false) {
gameState.selectedEmail = email;
// Remover seleção anterior
document.querySelectorAll('.email-item').forEach(item => {
item.classList.remove('selected');
});
// Adicionar seleção atual
event.currentTarget.classList.add('selected');
// Abrir email em tela cheia
openFullscreenEmail(email, isReadOnly);
}
// Abrir email em tela cheia
function openFullscreenEmail(email, isReadOnly = false) {
const emailFullscreen = document.getElementById('emailFullscreen');
const fullscreenContent = document.getElementById('fullscreenContent');
const emailCounter = document.getElementById('emailCounter');
const backToFolder = document.getElementById('backToFolder');
const emailActions = document.getElementById('emailActions');
const suspiciousClass = email.isPhishing ? 'suspicious-domain' : '';
let currentEmails, folderName;
switch (gameState.currentView) {
case 'inbox':
currentEmails = gameState.emails;
folderName = 'Caixa de Entrada';
break;
case 'read':
currentEmails = gameState.readEmails;
folderName = 'Emails Lidos';
break;
case 'spam':
currentEmails = gameState.spamEmails;
folderName = 'Spam/Phishing';
break;
}
const currentIndex = currentEmails.findIndex(e => e.id === email.id) + 1;
// Atualizar contador e pasta
emailCounter.textContent = `Email ${currentIndex} de ${currentEmails.length}`;
backToFolder.textContent = folderName;
// Configurar ações baseado no modo
if (isReadOnly) {
emailActions.className = 'email-actions read-only';
emailActions.innerHTML = `
<div style="text-align: center; color: #6c757d;">
</div>
`;
} else {
emailActions.className = 'email-actions';
emailActions.innerHTML = `
<div style="text-align: center; margin-bottom: 15px;">
<strong>Este email é legítimo ou uma tentativa de phishing?</strong>
</div>
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
<button class="btn btn-danger" onclick="markAsPhishing()" style="min-width: 150px;">
🚫 É PHISHING
</button>
<button class="btn btn-success" onclick="markAsLegitimate()" style="min-width: 150px;">
✅ É LEGÍTIMO
</button>
<button class="btn btn-warning" onclick="markAsUnsure()" style="min-width: 150px;">
❓ NÃO TENHO CERTEZA
</button>
</div>
`;
}
// Renderizar conteúdo do email
fullscreenContent.innerHTML = `
<div class="email-header" style="flex-shrink: 0;">
<div class="email-subject-line" style="font-size: 1.8rem; margin-bottom: 20px;">
${email.subject}
</div>
<div class="email-details" style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 10px;">
<div class="email-detail">
<span class="detail-label">De:</span>
<span class="detail-value ${suspiciousClass}" style="font-family: monospace; font-size: 0.95rem;">
${email.sender}
</span>
</div>
<div class="email-detail">
<span class="detail-label">Para:</span>
<span class="detail-value" style="font-family: monospace; font-size: 0.95rem;">
voce@empresa.com
</span>
</div>
<div class="email-detail">
<span class="detail-label">Data:</span>
<span class="detail-value">
Segunda-feira, 21 de julho de 2025, ${email.time}
</span>
</div>
<div class="email-detail">
<span class="detail-label">Assunto:</span>
<span class="detail-value">${email.subject}</span>
</div>
</div>
</div>
<div class="email-content" style="flex: 1; padding: 30px; background: white; margin: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div class="email-body" style="max-width: none; font-size: 1.1rem; line-height: 1.8;">
${email.content}
</div>
</div>
`;
// Mostrar tela cheia
emailFullscreen.classList.add('active');
}
// Fechar email em tela cheia
function closeFullscreenEmail() {
const emailFullscreen = document.getElementById('emailFullscreen');
emailFullscreen.classList.remove('active');
// Remover seleção
document.querySelectorAll('.email-item').forEach(item => {
item.classList.remove('selected');
});
}
// Marcar como phishing
function markAsPhishing() {
if (!gameState.selectedEmail) return;
const isCorrect = gameState.selectedEmail.isPhishing;
processDecision(isCorrect, 'phishing');
}
// Marcar como legítimo
function markAsLegitimate() {
if (!gameState.selectedEmail) return;
const isCorrect = !gameState.selectedEmail.isPhishing;
processDecision(isCorrect, 'legitimate');
}
// Marcar como incerto
function markAsUnsure() {
if (!gameState.selectedEmail) return;
processDecision(true, 'unsure', 50); // Pontuação reduzida por incerteza
}
// Processar decisão
function processDecision(isCorrect, decision, customPoints = null) {
gameState.totalDecisions++;
let points = 0;
let message = '';
let type = '';
let icon = '';
let title = '';
if (decision === 'unsure') {
points = customPoints || 50;
title = 'Decisão Cautelosa';
message = 'É sempre melhor ter dúvidas do que tomar uma decisão precipitada. A cautela é importante na segurança digital!';
type = 'cautious';
icon = '🤔';
gameState.correctDecisions++; // Contar como correto
moveEmailToRead(gameState.selectedEmail);
} else if (isCorrect) {
gameState.correctDecisions++;
if (gameState.selectedEmail.isPhishing) {
points = 150;
gameState.threatsBlocked++;
title = 'Excelente Detecção!';
message = 'Parabéns! Você identificou corretamente este email como uma tentativa de phishing e protegeu-se de uma ameaça real.';
type = 'correct';
icon = '🎯';
// Mover para pasta de spam se identificado como phishing
moveEmailToSpam(gameState.selectedEmail);
} else {
points = 100;
title = 'Identificação Correta!';
message = 'Muito bem! Você reconheceu que este email é legítimo e seguro para interagir.';
type = 'correct';
icon = '✅';
// Mover para emails lidos se identificado como legítimo
moveEmailToRead(gameState.selectedEmail);
}
} else {
points = -75;
if (gameState.selectedEmail.isPhishing) {
title = 'Ameaça Não Detectada';
message = 'Atenção! Este email era uma tentativa de phishing que passou despercebida. Vamos analisar os sinais que você perdeu.';
icon = '⚠️';
// Email vai para lidos mesmo sendo phishing não detectado
moveEmailToRead(gameState.selectedEmail);
} else {
title = 'Falso Positivo';
message = 'Este email era legítimo, mas você o identificou como phishing. Vamos ver as características que indicam sua legitimidade.';
icon = '❌';
// Mover para spam mesmo estando errado (simulando ação real)
moveEmailToSpam(gameState.selectedEmail);
}
type = 'incorrect';
}
gameState.score += points;
if (gameState.score < 0) gameState.score = 0;
updateStats();
// Mostrar tela de feedback
showFeedbackScreen(type, icon, title, message, points);
}
// Mover email para pasta de lidos
function moveEmailToRead(email) {
email.readTime = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
gameState.readEmails.unshift(email); // Adicionar no início da lista
updateCounts();
}
// Mover email para pasta de spam
function moveEmailToSpam(email) {
email.movedToSpam = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
gameState.spamEmails.unshift(email); // Adicionar no início da lista
updateCounts();
}
// Mostrar tela de feedback
function showFeedbackScreen(type, icon, title, message, points) {
const feedbackScreen = document.getElementById('feedbackScreen');
const feedbackHeader = document.getElementById('feedbackHeader');
const feedbackHeaderTitle = document.getElementById('feedbackHeaderTitle');
const feedbackIcon = document.getElementById('feedbackIcon');
const feedbackTitle = document.getElementById('feedbackTitle');
const feedbackMessage = document.getElementById('feedbackMessage');
const scoreUpdate = document.getElementById('scoreUpdate');
const feedbackExplanation = document.getElementById('feedbackExplanation');
const feedbackFlags = document.getElementById('feedbackFlags');
// Configurar header
feedbackHeader.className = `feedback-header ${type}`;
feedbackHeaderTitle.textContent = type === 'correct' ? 'Análise Correta!' :
type === 'incorrect' ? 'Análise Incorreta' :
'Decisão Cautelosa';
// Configurar conteúdo
feedbackIcon.textContent = icon;
feedbackTitle.textContent = title;
feedbackMessage.textContent = message;
// Configurar pontuação
const scoreClass = points > 0 ? 'positive' : points < 0 ? 'negative' : '';
scoreUpdate.className = `score-update ${scoreClass}`;
scoreUpdate.textContent = points > 0 ? `+${points} pontos adicionados!` :
points < 0 ? `${points} pontos deduzidos` :
`+${points} pontos`;
// Configurar explicação
const email = gameState.selectedEmail;
if (email.isPhishing && email.redFlags) {
feedbackExplanation.querySelector('h4').textContent = '🚩 Sinais de Phishing Detectados:';
feedbackFlags.innerHTML = email.redFlags.map(flag =>
`<li class="red-flag-item">${flag}</li>`
).join('');
} else if (!email.isPhishing && email.greenFlags) {
feedbackExplanation.querySelector('h4').textContent = '✅ Indicadores de Email Legítimo:';
feedbackFlags.innerHTML = email.greenFlags.map(flag =>
`<li class="green-flag-item">${flag}</li>`
).join('');
} else {
feedbackExplanation.querySelector('h4').textContent = '💭 Explicação:';
feedbackFlags.innerHTML = `<li>${email.explanation}</li>`;
}
// Mostrar tela
feedbackScreen.classList.add('active');
}
// Fechar tela de feedback
function closeFeedbackScreen() {
const feedbackScreen = document.getElementById('feedbackScreen');
feedbackScreen.classList.remove('active');
// Fechar email em tela cheia e remover da lista
closeFullscreenEmail();
removeEmailFromInbox();
// Verificar se o jogo terminou
if (gameState.totalDecisions >= gameState.maxEmails) {
setTimeout(() => {
showFinalResults();
}, 500);
}
}
// Remover email da caixa de entrada
function removeEmailFromInbox() {
if (!gameState.selectedEmail) return;
gameState.emails = gameState.emails.filter(email => email.id !== gameState.selectedEmail.id);
gameState.selectedEmail = null;
renderEmailList();
}
// Mostrar resultados finais
function showFinalResults() {
gameState.gameComplete = true;
const finalResults = document.getElementById('finalResults');
const resultsContent = document.querySelector('.results-content');
// Calcular estatísticas
const accuracy = Math.round((gameState.correctDecisions / gameState.totalDecisions) * 100);
const phishingDetected = gameState.threatsBlocked;
// Determinar nota/grade
let grade, gradeClass, performanceMessage;
if (accuracy >= 90) {
grade = 'A+';
gradeClass = 'grade-a';
performanceMessage = 'Excepcional! Você demonstrou excelente conhecimento em segurança digital. Está pronto para proteger-se contra ameaças reais!';
} else if (accuracy >= 80) {
grade = 'A';
gradeClass = 'grade-a';
performanceMessage = 'Muito bom! Você tem boas habilidades de detecção de phishing. Continue praticando para aperfeiçoar ainda mais!';
} else if (accuracy >= 70) {
grade = 'B';
gradeClass = 'grade-b';
performanceMessage = 'Bom trabalho! Você consegue identificar a maioria das ameaças, mas há espaço para melhorar. Pratique mais!';
} else if (accuracy >= 60) {
grade = 'C';
gradeClass = 'grade-c';
performanceMessage = 'Razoável. Você identificou algumas ameaças, mas precisa ser mais cuidadoso. Estude os sinais de phishing!';
} else if (accuracy >= 50) {
grade = 'D';
gradeClass = 'grade-d';
performanceMessage = 'Atenção! Você precisa melhorar suas habilidades de detecção. Revise o tutorial e pratique mais!';
} else {
grade = 'F';
gradeClass = 'grade-f';
performanceMessage = 'Cuidado! Você está vulnerável a ataques de phishing. É muito importante estudar e praticar mais antes de lidar com emails reais!';
}
// Atualizar conteúdo
resultsContent.innerHTML = `
<div class="results-title">🏆 Jogo Concluído!</div>
<div class="results-subtitle">Aqui está seu desempenho na detecção de phishing</div>
<div class="results-stats">
<div class="stat-box">
<div class="stat-number">${accuracy}%</div>
<div class="stat-label">Precisão</div>
</div>
<div class="stat-box">
<div class="stat-number">${gameState.score}</div>
<div class="stat-label">Pontos</div>
</div>
<div class="stat-box">
<div class="stat-number">${phishingDetected}</div>
<div class="stat-label">Ameaças Bloqueadas</div>
</div>
<div class="stat-box">
<div class="stat-number">${gameState.correctDecisions}/${gameState.totalDecisions}</div>
<div class="stat-label">Acertos</div>
</div>
</div>
<div class="performance-message">${performanceMessage}</div>
<button class="restart-btn" onclick="restartGame()">Jogar Novamente</button>
`;
finalResults.classList.add('active');
}
// Reiniciar jogo
function restartGame() {
// Reset do estado do jogo
gameState = {
score: 0,
correctDecisions: 0,
totalDecisions: 0,
threatsBlocked: 0,
selectedEmail: null,
emails: [],
readEmails: [],
spamEmails: [],
currentView: 'inbox',
gameComplete: false,
maxEmails: 10
};
// Fechar tela de resultados
document.getElementById('finalResults').classList.remove('active');
// Voltar para inbox
showInbox();
// Reinicializar emails
initializeEmails();
}
// Atualizar contadores
function updateCounts() {
const unreadCount = gameState.emails.length;
const readCount = gameState.readEmails.length;
const spamCount = gameState.spamEmails.length;
document.getElementById('unreadCount').textContent = `(${unreadCount})`;
document.getElementById('readCount').textContent = `(${readCount})`;
document.getElementById('spamCount').textContent = `(${spamCount})`;
}
// Mostrar notificação
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification-toast ${type}`;
notification.innerHTML = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideInRight 0.3s ease reverse';
setTimeout(() => notification.remove(), 300);
}, 4000);
}
// Atualizar estatísticas
function updateStats() {
document.getElementById('scoreValue').textContent = gameState.score;
document.getElementById('threatsValue').textContent = gameState.threatsBlocked;
const accuracy = gameState.totalDecisions > 0 ?
Math.round((gameState.correctDecisions / gameState.totalDecisions) * 100) : 100;
document.getElementById('accuracyValue').textContent = accuracy + '%';
}
// Mostrar tutorial
function showTutorial() {
document.getElementById('tutorialOverlay').style.display = 'flex';
}
// Fechar tutorial
function closeTutorial() {
document.getElementById('tutorialOverlay').style.display = 'none';
}
// Funções da sidebar
function showInbox() {
gameState.currentView = 'inbox';
document.getElementById('currentFolderTitle').textContent = 'Caixa de Entrada';
// Atualizar menu ativo
document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));
document.querySelector('.menu-item[onclick="showInbox()"]').classList.add('active');
renderEmailList();
}
function showReadEmails() {
gameState.currentView = 'read';
document.getElementById('currentFolderTitle').textContent = 'Emails Lidos';
// Atualizar menu ativo
document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));
document.querySelector('.menu-item[onclick="showReadEmails()"]').classList.add('active');
renderEmailList();
}
function showSpam() {
gameState.currentView = 'spam';
document.getElementById('currentFolderTitle').textContent = 'Spam/Phishing';
// Atualizar menu ativo
document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));
document.querySelector('.menu-item[onclick="showSpam()"]').classList.add('active');
renderEmailList();
}
// Inicialização
document.addEventListener('DOMContentLoaded', function () {
initializeEmails();
updateCounts();
// Mostrar tutorial na primeira vez
setTimeout(() => {
showTutorial();
}, 1000);
});
// Fechar tutorial ao clicar fora
document.getElementById('tutorialOverlay').addEventListener('click', function (e) {
if (e.target === this) {
closeTutorial();
}
});
// Atalhos de teclado
document.addEventListener('keydown', function (e) {
// Só permitir atalhos se não estiver em modo de leitura
const emailActions = document.getElementById('emailActions');
const isReadOnly = emailActions && emailActions.classList.contains('read-only');
switch (e.key) {
case '1':
if (gameState.selectedEmail && !isReadOnly) markAsPhishing();
break;
case '2':
if (gameState.selectedEmail && !isReadOnly) markAsLegitimate();
break;
case '3':
if (gameState.selectedEmail && !isReadOnly) markAsUnsure();
break;
case 'Escape':
if (document.getElementById('emailFullscreen').classList.contains('active')) {
closeFullscreenEmail();
} else {
closeTutorial();
}
break;
case 'Backspace':
if (document.getElementById('emailFullscreen').classList.contains('active')) {
closeFullscreenEmail();
}
break;
}
});
</script>
</body>
</html>