educacao/decoda
11
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: adiciona mascote Capicoda na página inicial

Browse Source 
Capicoda é uma capivara comunista que conversa com quem visita o site,
identifica se a pessoa é desenvolvedora e a direciona para contribuir com
o DECODA (repositório, setup local, fluxo de PR).

- app/src/vendor/capicoda/: widget autocontido em vanilla JS (CSS, SVG da
  capivara e árvore de diálogo embutidos), README e página de demo standalone.
- HomePage: injeta o widget apenas na home via import ?url + useEffect, com
  limpeza ao sair da rota.
This commit is contained in:
Fred Amaral
2026-06-27 17:27:23 -03:00
parent fd45878b06
commit 79cbb56707
4 changed files with 529 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
app/src/vendor/capicoda/demo.html vendored Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Capicoda — demo · Núcleo de Tecnologia do MTST</title>
<style>
:root { --vermelho: #c1121f; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: #1d1d1f; line-height: 1.6; background: #faf6f1;
}
header {
background: var(--vermelho); color: #fff; padding: 18px 24px;
display: flex; align-items: center; gap: 12px;
}
header .star { font-size: 26px; }
header h1 { font-size: 19px; font-weight: 700; }
.hero {
max-width: 760px; margin: 0 auto; padding: 64px 24px 40px; text-align: center;
}
.hero h2 { font-size: 38px; line-height: 1.2; margin-bottom: 16px; }
.hero h2 span { color: var(--vermelho); }
.hero p { font-size: 18px; color: #4a4a4a; max-width: 560px; margin: 0 auto; }
.grid {
max-width: 760px; margin: 0 auto; padding: 24px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 20px; }
.card h3 { font-size: 16px; margin-bottom: 6px; }
.card p { font-size: 14px; color: #555; }
.hint {
max-width: 760px; margin: 12px auto 80px; padding: 16px 20px; border-radius: 12px;
background: #fff3cd; border: 1px solid #ffe69c; color: #664d03; font-size: 14px;
text-align: center;
}
footer { text-align: center; padding: 24px; color: #999; font-size: 13px; }
</style>
</head>
<body>
<header>
<span class="star">🚩</span>
<h1>Núcleo de Tecnologia · MTST</h1>
</header>
<section class="hero">
<h2>Aprenda a programar com o <span>DECODA</span></h2>
<p>Plataforma educacional do MTST: lógica de programação através de jogos
e blocos visuais. Tecnologia como ferramenta de transformação social.</p>
</section>
<section class="grid">
<div class="card"><h3>🎮 Jogos</h3><p>Atividades interativas para aprender programação na prática.</p></div>
<div class="card"><h3>🧩 Blocos visuais</h3><p>Programação arrastar-e-soltar com Blockly, sem decorar sintaxe.</p></div>
<div class="card"><h3>🆓 Livre e gratuito</h3><p>100% gratuito, sem cadastro, código aberto.</p></div>
</section>
<div class="hint">
👉 Página de demonstração. O balão da capivara <b>Capicoda</b> aparece no
canto inferior direito — clique pra conversar.
</div>
<footer>Demo do mascote Capicoda · hackathon do Núcleo de Tecnologia do MTST</footer>
<!-- É só isto que precisa ir na página real do Núcleo: -->
<script src="capicoda.js" defer></script>
</body>
</html>