@import url(‘https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap’);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ada-container {
background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a0a1a 100%);
color: #fff;
font-family: ‘VT323’, monospace;
padding: 20px;
position: relative;
overflow: hidden;
min-height: 100vh;
}
/* Efeito de grid cyberpunk */
.ada-container::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(255, 0, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
0% { transform: translateY(0); }
100% { transform: translateY(20px); }
}
/* Partículas flutuantes */
.particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.particle {
position: absolute;
width: 3px;
height: 3px;
background: #ff00ff;
box-shadow: 0 0 10px #ff00ff;
animation: float 10s infinite;
}
.particle:nth-child(2n) {
background: #00ffff;
box-shadow: 0 0 10px #00ffff;
animation-duration: 15s;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}
.content-wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Header pixelado */
.pixel-header {
text-align: center;
margin-bottom: 40px;
padding: 30px;
background: rgba(255, 0, 255, 0.1);
border: 3px solid #ff00ff;
box-shadow:
0 0 20px rgba(255, 0, 255, 0.5),
inset 0 0 20px rgba(255, 0, 255, 0.1);
position: relative;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), inset 0 0 20px rgba(255, 0, 255, 0.1); }
50% { box-shadow: 0 0 40px rgba(255, 0, 255, 0.8), inset 0 0 30px rgba(255, 0, 255, 0.2); }
}
.pixel-header h1 {
font-family: ‘Press Start 2P’, cursive;
font-size: 24px;
color: #ff00ff;
text-shadow:
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 30px #ff00ff,
3px 3px 0 #00ffff;
margin-bottom: 20px;
line-height: 1.5;
}
.pixel-header .subtitle {
font-size: 20px;
color: #00ffff;
text-shadow: 0 0 10px #00ffff;
margin-top: 15px;
}
/* Seções do conteúdo */
.section {
background: rgba(0, 0, 0, 0.6);
border: 2px solid #00ffff;
padding: 30px;
margin-bottom: 30px;
position: relative;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.section::before {
content: ”;
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
z-index: -1;
opacity: 0;
transition: opacity 0.3s;
}
.section:hover::before {
opacity: 0.3;
animation: borderGlow 1.5s infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.section-title {
font-family: ‘Press Start 2P’, cursive;
font-size: 18px;
color: #ff00ff;
text-shadow: 0 0 10px #ff00ff;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.section-title .emoji {
font-size: 28px;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.section-content {
font-size: 20px;
line-height: 1.8;
color: #ffffff;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.section-content p {
margin-bottom: 15px;
}
.highlight {
color: #00ffff;
font-weight: bold;
text-shadow: 0 0 10px #00ffff;
}
.pink-highlight {
color: #ff00ff;
font-weight: bold;
text-shadow: 0 0 10px #ff00ff;
}
/* Lista de conexões */
.connection-list {
list-style: none;
padding: 0;
}
.connection-list li {
padding: 15px;
margin: 10px 0;
background: rgba(255, 0, 255, 0.1);
border-left: 4px solid #ff00ff;
position: relative;
transition: all 0.3s;
}
.connection-list li:hover {
background: rgba(255, 0, 255, 0.2);
transform: translateX(10px);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}
.connection-list li::before {
content: ‘▶’;
color: #00ffff;
margin-right: 10px;
animation: blink 1.5s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Card de recompensa */
.reward-card {
background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
border: 3px solid #ff00ff;
padding: 25px;
text-align: center;
margin: 30px 0;
position: relative;
overflow: hidden;
}
.reward-card::before {
content: ‘★’;
position: absolute;
font-size: 100px;
color: rgba(255, 0, 255, 0.1);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotateStar 10s linear infinite;
}
@keyframes rotateStar {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.reward-text {
position: relative;
z-index: 1;
font-size: 22px;
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
/* Música player */
.music-player {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00ffff;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}
.music-icon {
font-size: 40px;
animation: musicPulse 0.8s infinite;
}
@keyframes musicPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Carta mística */
.mystical-card {
background: rgba(138, 43, 226, 0.2);
border: 3px solid #ff00ff;
padding: 25px;
text-align: center;
position: relative;
margin: 30px 0;
box-shadow:
0 0 30px rgba(255, 0, 255, 0.6),
inset 0 0 30px rgba(255, 0, 255, 0.2);
}
.mystical-card::before,
.mystical-card::after {
content: ‘✦’;
position: absolute;
font-size: 30px;
color: #00ffff;
animation: sparkle 2s infinite;
}
.mystical-card::before {
top: 10px;
left: 10px;
}
.mystical-card::after {
bottom: 10px;
right: 10px;
animation-delay: 1s;
}
@keyframes sparkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.5); }
}
/* Tags pedagógicas */
.tag-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
}
.tag {
background: rgba(0, 255, 255, 0.2);
border: 2px solid #00ffff;
padding: 8px 15px;
font-size: 16px;
color: #00ffff;
text-shadow: 0 0 5px #00ffff;
transition: all 0.3s;
}
.tag:hover {
background: rgba(0, 255, 255, 0.4);
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}
/* Glossário */
.glossary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
margin-top: 20px;
}
.glossary-item {
background: rgba(255, 0, 255, 0.1);
border: 1px solid #ff00ff;
padding: 15px;
transition: all 0.3s;
}
.glossary-item:hover {
background: rgba(255, 0, 255, 0.2);
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}
.glossary-term {
font-family: ‘Press Start 2P’, cursive;
font-size: 14px;
color: #ff00ff;
margin-bottom: 10px;
}
.glossary-definition {
font-size: 18px;
color: #ffffff;
}
/* Responsivo */
@media (max-width: 768px) {
.pixel-header h1 {
font-size: 16px;
}
.section-title {
font-size: 14px;
}
.section-content {
font-size: 18px;
}
.glossary-grid {
grid-template-columns: 1fr;
}
}
/* Easter egg – código binário flutuante */
.binary-code {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
opacity: 0.1;
font-family: ‘Courier New’, monospace;
font-size: 12px;
color: #00ffff;
overflow: hidden;
}
.binary-line {
white-space: nowrap;
animation: scrollBinary 20s linear infinite;
}
@keyframes scrollBinary {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
01000001 01000100 01000001 00100000 01001100 01001111 01010110 01000101 01001100 01000001 01000011 01000101
🧮 27 DE NOVEMBRO
ADA LOVELACE
🎯 A MULHER QUE PROGRAMOU O FUTURO
ANTES DO FUTURO EXISTIR
💻
ABERTURA
Hoje celebramos Ada Lovelace, a matemática que, em 1852, escreveu o primeiro algoritmo da história — um código criado para um computador inexistente. Basicamente, Ada fez o que todo programador moderno faz na sexta-feira à noite: escreveu algo que o hardware não ia aguentar.
Mas ela fez isso 100 anos antes do hardware existir. Isso é ultrapassar limites. Isso é pensar como gente da StoryMode.
💡
CONTEXTO HISTÓRICO
Ada Lovelace era filha de Lord Byron, mas ignorou completamente o drama poético do pai e decidiu operar no terreno da lógica matemática. Ao estudar a Máquina Analítica de Charles Babbage, ela percebeu algo que ninguém mais tinha visto:
“Esta máquina não calcula. Ela cria.”
Ada compreendeu antes de todo mundo que uma máquina poderia manipular símbolos, gerar música, processar imagens e criar linguagens inteiramente novas.
Ela inventou a ideia de programação. Ela previu o computador moderno. Ela imaginou a inteligência artificial antes que existisse eletricidade para ligá-la.
Visionária é pouco. Ada foi interdimensional.
🧠
CONEXÃO COM ECONOMIA CRIATIVA & INOVAÇÃO
-
O impossível de hoje é o óbvio de amanhã
Ada escreveu código para uma máquina hipotética — criadores fazem isso o tempo todo: projetam o que ainda não existe. -
Ideias são mais importantes que ferramentas
Não interessa se o “hardware da vida” ainda não está pronto. Você pode estar adiantado, e isso é bom. -
Criatividade também é matemática
O algoritmo é uma história. Uma sequência. Uma dança lógica. Um poema que funciona. Ada entendeu isso antes de todos. -
Tecnologia é linguagem
E toda linguagem permite criar mundos. Ada foi a primeira arquiteta desses mundos.
🪙
RECOMPENSA DO DIA
Perceber que toda grande criação começa como ficção científica pessoal. E que sua visão pode estar 100 anos à frente — continue mesmo assim.
🎧
TRILHA DOS ANOS 80
🎵
“Sweet Dreams (Are Made of This)” – Eurythmics (1983)
Fria, eletrônica, matemática, elegante — a trilha perfeita para o mood Ada + futurismo.
🧙♂️
CARTA CORRESPONDENTE
📜 A Matemágica do Futuro
“O código não é sobre máquinas — é sobre imaginação.”
🧠
CARIMBO PEDAGÓGICO EDTECH.COOL STORYMODE
📚 Bloom: Criar • Avaliar
🌍 UNESCO: Cultura Digital • Pensamento Científico & Criativo
🎯 OCDE: Future Skills — Computação Criativa, Raciocínio Algorítmico
💻 ISTE: Innovative Designer • Computational Thinker
💬
DICA PBL PARA EDUCADORES
Peça ao aluno para criar um algoritmo narrativo: Passo a passo de como uma ideia vira algo real.
Exemplo:
- nascer a ideia
- pesquisar
- testar
- falhar
- ajustar
- apresentar
- aplicar
- escalar
Depois, eles transformam isso em um fluxograma visual.
📚
GLOSSÁRIO
ALGORITMO
Sequência de passos lógicos para resolver um problema.
ADA LOVELACE
Primeira programadora da história.
MÁQUINA ANALÍTICA
Máquina proposta por Charles Babbage que inspirou o conceito do computador moderno.
COMPUTAÇÃO CRIATIVA
Uso de lógica e imaginação para criar novas soluções e linguagens.
PENSAMENTO ALGORÍTMICO
Capacidade de decompor um problema em etapas.
STEAMPUNK
Estética que mescla tecnologia futurista com visual da era vitoriana.
LINGUAGEM DE MÁQUINA
Sistema de códigos que instruem máquinas a executar ações.
