Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crise de Dados 2030 - Futuro & Inovação S.A.</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> | |
| <style> | |
| /* --- VARIABLES & RESET --- */ | |
| :root { | |
| --primary: #DC2626; /* Rojo Alerta/Crisis */ | |
| --accent: #2563EB; /* Azul Corporativo */ | |
| --dark: #0F172A; /* Slate Dark */ | |
| --light: #F8FAFC; /* Slate Light */ | |
| --text-main: #334155; | |
| --white: #FFFFFF; | |
| --fs-h1: clamp(2rem, 3.5vw, 3.5rem); | |
| --fs-h2: clamp(1.4rem, 2.5vw, 2rem); | |
| --fs-body: clamp(0.85rem, 1.2vw, 1rem); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background-color: #111; | |
| font-family: 'Inter', sans-serif; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| color: var(--text-main); | |
| } | |
| /* --- CONTENEDOR 16:9 HD --- */ | |
| .presentation-stage { | |
| width: min(95vw, 1280px); | |
| aspect-ratio: 16 / 9; | |
| background: var(--light); | |
| position: relative; | |
| box-shadow: 0 0 50px rgba(0,0,0,0.7); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| /* --- SLIDES --- */ | |
| .slide { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| opacity: 0; | |
| transform: translateX(20px); | |
| transition: opacity 0.4s ease, transform 0.4s ease; | |
| pointer-events: none; | |
| background: var(--white); | |
| padding: 3rem 4rem; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| transform: translateX(0); | |
| pointer-events: all; | |
| z-index: 10; | |
| } | |
| /* --- TYPOGRAPHY & LAYOUT --- */ | |
| .header { | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid #E2E8F0; | |
| padding-bottom: 10px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: end; | |
| } | |
| .header h2 { | |
| font-size: var(--fs-h2); | |
| color: var(--dark); | |
| text-transform: uppercase; | |
| font-weight: 800; | |
| margin: 0; | |
| } | |
| .header .page-num { | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--primary); | |
| font-weight: bold; | |
| } | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; height: 100%; } | |
| .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; height: 100%; } | |
| .card { | |
| background: var(--white); | |
| border: 1px solid #E2E8F0; | |
| border-radius: 8px; | |
| padding: 1.2rem; | |
| box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card h3 { font-size: 1rem; color: var(--primary); margin-bottom: 0.8rem; text-transform: uppercase; font-weight: 700; } | |
| .card ul { padding-left: 1.2rem; } | |
| .card li { margin-bottom: 0.5rem; font-size: var(--fs-body); color: var(--text-main); line-height: 1.4; } | |
| /* --- DIAGRAMS --- */ | |
| .tech-stack { | |
| display: flex; flex-direction: column; gap: 10px; | |
| background: #1E293B; padding: 1.5rem; border-radius: 8px; color: white; | |
| height: 100%; justify-content: center; | |
| } | |
| .layer { | |
| background: rgba(255,255,255,0.1); padding: 10px; border-radius: 4px; | |
| text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; | |
| border: 1px dashed #475569; | |
| } | |
| .layer strong { color: var(--primary); display: block; font-size: 0.75rem; margin-bottom: 5px; } | |
| /* --- COVER --- */ | |
| .cover-container { | |
| height: 100%; display: flex; flex-direction: column; justify-content: center; | |
| border-left: 10px solid var(--primary); padding-left: 3rem; | |
| } | |
| .cover-year { | |
| font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; color: var(--text-main); font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| /* --- CONTROLS --- */ | |
| .controls { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 100; } | |
| .btn-nav { | |
| background: var(--dark); color: white; border: none; width: 40px; height: 40px; | |
| border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; | |
| transition: background 0.2s; | |
| } | |
| .btn-nav:hover { background: var(--primary); } | |
| .progress { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--primary); width: 0%; transition: width 0.3s; } | |
| /* --- UTILS --- */ | |
| .badge { background: #fee2e2; color: #991b1b; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; } | |
| .grammar-focus { color: var(--accent); font-weight: bold; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="presentation-stage" id="presentation"> | |
| <div class="progress"></div> | |
| <!-- SLIDE 1: PORTADA --> | |
| <div class="slide active"> | |
| <div class="cover-container"> | |
| <div class="cover-year">2030</div> | |
| <h1 style="font-size: var(--fs-h1); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: var(--dark);"> | |
| CRISE DE<br> | |
| <span style="color: var(--primary);">FUGA DE DADOS<br>CONFIDENCIAIS</span> | |
| </h1> | |
| <p style="font-size: var(--fs-h2); color: #64748B; font-weight: 300;">Futuro & Inovação S.A.</p> | |
| <br> | |
| <p style="font-size: var(--fs-h3); color: #64748B; font-weight: 300;">> ANDRES ALFREDO REJAS RAMIREZ - <b>Diretor de TI</b></p> | |
| <p style="font-size: var(--fs-h3); color: #64748B; font-weight: 300;">> EDSON EMANUEL ALVARADO PRIETO - <b>Gerente de Segurança</b></p> | |
| <p style="font-size: var(--fs-h3); color: #64748B; font-weight: 300;">> JAIRO DANIEL MENDOZA TORRES - <b>Chefe de Comunicação</b></p> | |
| <div style="margin-top: 3rem;"> | |
| <p style="font-family: 'JetBrains Mono', monospace; font-weight: 700;">PORTUGUÊS INTERMEDIÁRIO 1-2</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 2: CONTEXTO --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>1. O Cenário da Crise (2030)</h2> | |
| <span class="page-num">02</span> | |
| </div> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-triangle-exclamation"></i> O Incidente</h3> | |
| <p style="font-size: 0.9rem; margin-bottom: 10px;">Na manhã de hoje, nossos sistemas detectaram uma intrusão massiva. Dados de 50.000 clientes corporativos foram expostos na Dark Web.</p> | |
| <ul> | |
| <li><strong>Dados Vazados:</strong> Números de cartões virtuais, endereços biométricos e contratos inteligentes (Smart Contracts).</li> | |
| <li><strong>Origem:</strong> Falha no protocolo de segurança quântica.</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-users"></i> A Equipe de Crise</h3> | |
| <p style="font-size: 0.9rem; margin-bottom: 10px;">Estamos reunidos para tomar decisões rápidas e comunicar as soluções.</p> | |
| <ul> | |
| <li><strong>Objetivo:</strong> Conter o vazamento e restaurar a confiança.</li> | |
| <li><strong>Gramática Foco:</strong> Uso imperativo para ordens e futuro para promessas.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 3: IMPACTO --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>2. Análise de Impacto Imediato</h2> | |
| <span class="page-num">03</span> | |
| </div> | |
| <div class="grid-3"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-chart-line-down"></i> Financeiro</h3> | |
| <ul> | |
| <li>Queda de 15% nas ações da Futuro & Inovação S.A. nas últimas 4 horas.</li> | |
| <li>Risco de multas milionárias pela nova LGPD Global de 2028.</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-handshake-slash"></i> Reputacional</h3> | |
| <ul> | |
| <li>Perda de credibilidade com parceiros internacionais.</li> | |
| <li>Tendência negativa nas redes sociais neurais.</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-lock-open"></i> Operacional</h3> | |
| <ul> | |
| <li>Paralisação temporária dos servidores principais.</li> | |
| <li>Necessidade de redefinição de todas as chaves de acesso.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 4: AÇÕES IMEDIATAS (IMPERATIVO) --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>3. Ordens de Emergência <span style="font-size:0.6em; color:var(--accent)">(Imperativo)</span></h2> | |
| <span class="page-num">04</span> | |
| </div> | |
| <div style="display: flex; gap: 20px; height: 100%;"> | |
| <div class="card" style="flex: 1; border-left: 4px solid var(--primary);"> | |
| <h3><i class="fa-solid fa-walkie-talkie"></i> Comandos para a Equipe de TI</h3> | |
| <p style="margin-bottom:1rem; font-size:0.9rem;">Para conter a fuga, é necessário agir agora:</p> | |
| <ul> | |
| <li><span class="grammar-focus">Desliguem</span> imediatamente os servidores externos.</li> | |
| <li><span class="grammar-focus">Isolem</span> a rede afetada para evitar contaminação.</li> | |
| <li><span class="grammar-focus">Façam</span> o backup dos logs de segurança agora mesmo.</li> | |
| <li><span class="grammar-focus">Não permitam</span> nenhum acesso remoto até segunda ordem.</li> | |
| </ul> | |
| </div> | |
| <div class="card" style="flex: 1;"> | |
| <h3><i class="fa-solid fa-bullhorn"></i> Comandos para a Equipe de PR</h3> | |
| <ul> | |
| <li><span class="grammar-focus">Preparem</span> um comunicado oficial para a imprensa.</li> | |
| <li><span class="grammar-focus">Sejam</span> transparentes com os investidores.</li> | |
| <li><span class="grammar-focus">Monitorem</span> as redes sociais em tempo real.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 5: FUTURO DO PRESENTE --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>4. O Que Faremos a Seguir? <span style="font-size:0.6em; color:var(--accent)">(Futuro do Presente)</span></h2> | |
| <span class="page-num">05</span> | |
| </div> | |
| <div class="grid-2"> | |
| <div style="padding-right: 20px;"> | |
| <p style="margin-bottom: 1rem;">Nosso compromisso para os próximos dias é claro. Nós reconstruiremos a infraestrutura.</p> | |
| <ul style="line-height: 2;"> | |
| <li>Nós <span class="grammar-focus">investigaremos</span> a origem exata do ataque.</li> | |
| <li>A empresa <span class="grammar-focus">reembolsará</span> todos os clientes afetados.</li> | |
| <li>Nós <span class="grammar-focus">implementaremos</span> uma nova barreira de IA defensiva.</li> | |
| <li>Os diretores <span class="grammar-focus">darão</span> uma coletiva de imprensa amanhã.</li> | |
| </ul> | |
| </div> | |
| <div class="tech-stack"> | |
| <div class="layer"> | |
| <strong>NOVA ESTRUTURA DE DEFESA</strong> | |
| Segurança Quântica | IA Preditiva | |
| </div> | |
| <div class="layer" style="border-style: solid; border-color: var(--accent);"> | |
| <strong>AÇÕES FUTURAS</strong> | |
| Nós <span class="grammar-focus">criaremos</span> protocolos mais rígidos. | |
| </div> | |
| <div class="layer"> | |
| <strong>RESULTADO ESPERADO</strong> | |
| A confiança <span class="grammar-focus">voltará</span> em breve. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 6: PRESENTE DO SUBJUNTIVO --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>5. Condições e Desejos <span style="font-size:0.6em; color:var(--accent)">(Presente do Subjuntivo)</span></h2> | |
| <span class="page-num">06</span> | |
| </div> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-comments"></i> Expectativas da Diretoria</h3> | |
| <p style="font-size:0.9rem; margin-bottom:1rem;">Para que a crise acabe, precisamos de colaboração.</p> | |
| <ul> | |
| <li>É fundamental que a equipe <span class="grammar-focus">mantenha</span> a calma.</li> | |
| <li>Espero que os técnicos <span class="grammar-focus">resolvam</span> a falha hoje.</li> | |
| <li>É importante que nós <span class="grammar-focus">sejamos</span> honestos com o público.</li> | |
| <li>Talvez o hacker ainda <span class="grammar-focus">esteja</span> no sistema.</li> | |
| </ul> | |
| </div> | |
| <div class="card" style="border-left: 4px solid #F59E0B;"> | |
| <h3><i class="fa-solid fa-scale-balanced"></i> Requisitos Legais</h3> | |
| <p style="font-size:0.9rem; margin-bottom:1rem;">Advogados recomendam cautela.</p> | |
| <ul> | |
| <li>Recomendo que você não <span class="grammar-focus">fale</span> com a imprensa sem autorização.</li> | |
| <li>Para que a empresa não <span class="grammar-focus">pague</span> multas, agiremos rápido.</li> | |
| <li>Duvido que eles <span class="grammar-focus">tenham</span> acesso aos dados biométricos.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 7: PLANO DE RECUPERAÇÃO --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>6. Estratégia de Recuperação</h2> | |
| <span class="page-num">07</span> | |
| </div> | |
| <div class="grid-3"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-shield-halved"></i> Tecnologia</h3> | |
| <ul> | |
| <li>Nós <span class="grammar-focus">atualizaremos</span> todos os firewalls.</li> | |
| <li><span class="grammar-focus">Contratem</span> especialistas em cibersegurança (Imperativo).</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-hand-holding-heart"></i> Cliente</h3> | |
| <ul> | |
| <li>É necessário que o cliente <span class="grammar-focus">sinta</span> segurança novamente.</li> | |
| <li>Nós <span class="grammar-focus">ofereceremos</span> 1 ano de monitoramento gratuito.</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-gavel"></i> Jurídico</h3> | |
| <ul> | |
| <li>Espero que o governo <span class="grammar-focus">aceite</span> nosso plano de contingência.</li> | |
| <li>Nós <span class="grammar-focus">cooperaremos</span> com a polícia federal.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 8: HOJA DE RUTA (TIMELINE) --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>7. Cronograma de Resolução</h2> | |
| <span class="page-num">08</span> | |
| </div> | |
| <div style="display: flex; flex-direction: column; gap: 15px; height: 80%; justify-content: center;"> | |
| <div style="display: flex; align-items: center; gap: 20px;"> | |
| <div style="width: 150px; font-weight: bold; color: var(--primary);">FASE 1: HOJE<br><span style="font-size:0.8rem; color:#666;">Contenção</span></div> | |
| <div style="flex: 1; background: #fee2e2; padding: 15px; border-radius: 6px; border-left: 5px solid var(--primary);"> | |
| <strong>Imperativo:</strong> <span class="grammar-focus">Parem</span> o vazamento! <span class="grammar-focus">Bloqueiem</span> os acessos! A prioridade é estancar a perda de dados. | |
| </div> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 20px;"> | |
| <div style="width: 150px; font-weight: bold; color: var(--accent);">FASE 2: AMANHÃ<br><span style="font-size:0.8rem; color:#666;">Comunicação</span></div> | |
| <div style="flex: 1; background: #EFF6FF; padding: 15px; border-radius: 6px; border-left: 5px solid var(--accent);"> | |
| <strong>Futuro:</strong> Nós <span class="grammar-focus">falaremos</span> com os clientes. A empresa <span class="grammar-focus">explicará</span> o ocorrido e <span class="grammar-focus">pedirá</span> desculpas. | |
| </div> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 20px;"> | |
| <div style="width: 150px; font-weight: bold; color: var(--dark);">FASE 3: MÊS QUE VEM<br><span style="font-size:0.8rem; color:#666;">Prevenção</span></div> | |
| <div style="flex: 1; background: #F8FAFC; padding: 15px; border-radius: 6px; border-left: 5px solid var(--dark);"> | |
| <strong>Subjuntivo:</strong> É essencial que nós <span class="grammar-focus">treinemos</span> os funcionários para que isso não <span class="grammar-focus">aconteça</span> novamente. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 9: CONCLUSÃO --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>8. Considerações Finais</h2> | |
| <span class="page-num">09</span> | |
| </div> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-check-double"></i> Resumo</h3> | |
| <p style="margin-bottom: 10px;">A situação é crítica, mas controlável.</p> | |
| <ul> | |
| <li>Utilizamos o <strong>Imperativo</strong> para ações imediatas de crise.</li> | |
| <li>Usamos o <strong>Futuro do Presente</strong> para garantir estabilidade a longo prazo.</li> | |
| <li>Aplicamos o <strong>Presente do Subjuntivo</strong> para expressar desejos, dúvidas e condições necessárias.</li> | |
| </ul> | |
| </div> | |
| <div class="card" style="justify-content: center; align-items: center; text-align: center;"> | |
| <i class="fa-solid fa-fingerprint" style="font-size: 4rem; color: var(--primary); margin-bottom: 20px;"></i> | |
| <p>A segurança da <strong>Futuro & Inovação S.A.</strong> depende da nossa ação rápida hoje.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 10: CIERRE --> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h2>9. Perguntas e Respostas</h2> | |
| <span class="page-num">10</span> | |
| </div> | |
| <div style="display: flex; align-items: center; justify-content: center; height: 100%; text-align: center;"> | |
| <div class="card" style="max-width: 800px; padding: 2rem; border-top: 5px solid var(--primary);"> | |
| <h3 style="font-size: 1.5rem; text-align: center;">Obrigado pela Atenção</h3> | |
| <p style="font-size: 1.1rem; line-height: 1.6; color: var(--text-main); margin-top: 1rem;"> | |
| Estamos prontos para responder às suas dúvidas sobre o plano de contenção. | |
| </p> | |
| <div style="margin-top: 2rem; display: flex; justify-content: center; gap: 2rem;"> | |
| <div> | |
| <p style="font-weight: bold; color: var(--dark);">Andres Rejas</p> | |
| <span style="font-size: 0.8rem;">Diretor de TI</span> | |
| </div> | |
| <div> | |
| <p style="font-weight: bold; color: var(--dark);">Edson Alvarado</p> | |
| <span style="font-size: 0.8rem;">Gerente de Segurança</span> | |
| </div> | |
| <div> | |
| <p style="font-weight: bold; color: var(--dark);">Jairo Mendoza</p> | |
| <span style="font-size: 0.8rem;">Chefe de Comunicação</span> | |
| </div> | |
| </div> | |
| <p style="font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-top: 3rem; color: var(--accent);"> | |
| FUTURO & INOVAÇÃO S.A. | 2030 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button class="btn-nav" onclick="moveSlide(-1)"><i class="fa-solid fa-chevron-left"></i></button> | |
| <button class="btn-nav" onclick="moveSlide(1)"><i class="fa-solid fa-chevron-right"></i></button> | |
| </div> | |
| </div> | |
| <script> | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.slide'); | |
| const progressBar = document.querySelector('.progress'); | |
| function updateUI() { | |
| slides.forEach((slide, index) => { | |
| slide.classList.remove('active'); | |
| if (index === currentSlide) slide.classList.add('active'); | |
| }); | |
| const progress = ((currentSlide + 1) / slides.length) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| } | |
| function moveSlide(dir) { | |
| const next = currentSlide + dir; | |
| if (next >= 0 && next < slides.length) { | |
| currentSlide = next; | |
| updateUI(); | |
| } | |
| } | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight') moveSlide(1); | |
| if (e.key === 'ArrowLeft') moveSlide(-1); | |
| }); | |
| // Initialize | |
| updateUI(); | |
| </script> | |
| </body> | |
| </html> |