🌌 ALFABETO MUNDIAL 🌌
📡 A Mensagem Cósmica dos Utkonosorog
Os Utkonosorog ficaram maravilhados ao descobrir o "esqueleto" invisível que sustenta toda a World Wide Web: a Linguagem HTML. Criada por Tim Berners-Lee em 1991, ela não é uma linguagem de programação, mas de marcação. Usando tags como `
"Tags que abrem e fecham como um sanduíche de informações. A simplicidade que conectou um planeta."
Vamos decifrar as tags principais, os atributos essenciais e as cores nomeadas que dão vida às páginas web!
🤟 Alfabeto Manual da LIBRAS
⠃ Sistema de Escrita Tátil Braille
📟 Código Morse
🎵 Notação Musical Universal
🗣️ Alfabeto Fonético Internacional (IPA)
🎨 Código Cromático
🩺 Termos Médicos
💻 Sistema Binário
🐙 Sistema Octal
🔟 Sistema Decimal
🔶 Sistema Hexadecimal
🔤 Representação ASCII
🌐 Linguagem de Marcação HTML
O esqueleto da World Wide Web. Clique em uma tag para ver sua descrição e exemplo de uso!
Tags Principais
Cores Nomeadas em HTML
⌨️ Visualizador de Estrutura HTML
Digite uma palavra e veja como ela seria estruturada com tags HTML básicas!
💡 Tente digitar: HTML, WEB, LINK, DIV, TAG
🎮 Quiz Galáctico — Linguagem HTML
Teste seus conhecimentos sobre a estrutura da web! +20 pontos por acerto.
📜 +Um pouco de história
A HyperText Markup Language foi criada por Tim Berners-Lee em 1991 no CERN (Suíça). Evoluiu do HTML simples ao HTML5 (com suporte a multimídia como `
Não é uma linguagem de programação, mas de marcação, usando tags para definir conteúdo. É a base de todos os sites, permitindo interoperabilidade entre navegadores e dispositivos, sendo o verdadeiro esqueleto da presença digital moderna.
🌍 Curiosidades Universais
Explore as curiosidades de cada unidade nas abas específicas, ou descubra como todas se conectam na busca humana por comunicar o incomunicável!
', ''], correct:1},
{q:'2. Qual é a estrutura básica obrigatória de um documento HTML5?', opts:['', ' ', ' ', ' '], correct:0},
{q:'3. Qual atributo da tag especifica o destino do link?', opts:['src', 'href', 'link', 'url'], correct:1},
{q:'4. Qual "prato" simbólico da cultura web, mencionado nas curiosidades do HTML, representa a estrutura de tags?', opts:['Sanduíche de tags (abre/fecha)', 'Pizza de elementos', 'Bolo de atributos', 'Sopa de estilos'], correct:0},
{q:'5. A tag
requer qual atributo obrigatório para acessibilidade?', opts:['src', 'alt', 'title', 'class'], correct:1},
{q:'6. Qual profissão utiliza HTML diariamente para criar páginas web?', opts:['Cozinheiro', 'Desenvolvedor Web/Front-end', 'Professor de educação infantil', 'Veterinário'], correct:1},
{q:'7. A música "HTML5 Anthem" de artistas tech usa metáforas baseadas em:', opts:['Tags e elementos HTML', 'Ritmos de teclado', 'Melodias clássicas', 'Sons de natureza'], correct:0},
{q:'8. Qual tag HTML é usada para criar uma lista não ordenada?', opts:['', '', '- ', '
'], correct:1},
{q:'9. A W3C (World Wide Web Consortium) padroniza HTML. Qual área acadêmica estuda essas especificações?', opts:['História da Arte', 'Ciência da Computação e Engenharia Web', 'Biologia Marinha', 'Sociologia Rural'], correct:1},
{q:'10. Quem é creditado como o criador da World Wide Web e do HTML?', opts:['Bill Gates', 'Steve Jobs', 'Tim Berners-Lee', 'Mark Zuckerberg'], correct:2}
];
// ====== ESTADO DO JOGO ======
let state = {
score: 0, level: 1, achievements: 0,
lettersFound: new Set(), librasFound: new Set(), brailleFound: new Set(),
morseFound: new Set(), musicFound: new Set(), ipaFound: new Set(), chromaFound: new Set(),
medicalFound: new Set(), binaryFound: new Set(), octalFound: new Set(),
decimalFound: new Set(), hexFound: new Set(), asciiFound: new Set(), htmlFound: new Set(),
quizAnswered: {
libras: new Set(), braille: new Set(), morse: new Set(), music: new Set(),
ipa: new Set(), chroma: new Set(), medical: new Set(), binary: new Set(),
octal: new Set(), decimal: new Set(), hex: new Set(), ascii: new Set(), html: new Set()
},
unitCompleted: false, htmlSecrets: new Set()
};
// ====== FUNÇÕES ======
function updateHUD() {
document.getElementById('score').textContent = state.score;
document.getElementById('level').textContent = 1 + Math.floor(state.score / 150);
document.getElementById('achievements').textContent = state.achievements;
const total = state.librasFound.size + state.brailleFound.size + state.morseFound.size +
state.musicFound.size + state.ipaFound.size + state.chromaFound.size +
state.medicalFound.size + state.binaryFound.size + state.octalFound.size +
state.decimalFound.size + state.hexFound.size + state.asciiFound.size + state.htmlFound.size;
document.getElementById('lettersFound').textContent = Math.min(total, 880);
}
function addScore(pts) { state.score += pts; updateHUD(); }
function addAchievement() { state.achievements++; updateHUD(); }
function notify(msg, bad=false) {
const n = document.getElementById('notification');
n.textContent = msg; n.classList.toggle('bad', bad); n.classList.add('show');
setTimeout(() => n.classList.remove('show'), 2500);
}
function switchTab(lang) {
document.querySelectorAll('.lang-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.lang-content').forEach(c => c.classList.remove('active'));
event.target.classList.add('active');
document.getElementById(lang).classList.add('active');
}
function completeHtmlUnit() {
if (!state.unitCompleted) {
state.unitCompleted = true; addScore(500); addAchievement();
notify('🏆 UNIDADE HTML CONCLUÍDA! +500 pts');
} else { notify('Você já concluiu esta unidade!'); }
}
// ====== CONSTRUÇÃO GRIDs ======
function buildLibras() {
const grid = document.getElementById('librasGrid');
librasAlphabet.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card libras-card';
card.innerHTML = `${item.emoji}${item.l}`;
card.onclick = () => { if (!state.librasFound.has(`libras-${idx}`)) { state.librasFound.add(`libras-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildBraille() {
const grid = document.getElementById('brailleGrid');
brailleAlphabet.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card braille-card';
card.innerHTML = `${item.char}${item.l}`;
card.onclick = () => { if (!state.brailleFound.has(`braille-${idx}`)) { state.brailleFound.add(`braille-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildMorse() {
const grid = document.getElementById('morseGrid');
morseAlphabet.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card morse-card';
card.innerHTML = `${item.l}${item.code}`;
card.onclick = () => { if (!state.morseFound.has(`morse-${idx}`)) { state.morseFound.add(`morse-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildMusic() {
const nGrid = document.getElementById('musicNotesGrid');
musicNotes.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card music-card';
card.innerHTML = `${item.symbol}${item.name}`;
card.onclick = () => { if (!state.musicFound.has(`music-n-${idx}`)) { state.musicFound.add(`music-n-${idx}`); addScore(5); } updateHUD(); };
nGrid.appendChild(card);
});
const sGrid = document.getElementById('musicSymbolsGrid');
musicSymbols.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card music-card'; card.style.minHeight = '90px';
card.innerHTML = `${item.symbol}${item.name}`;
card.onclick = () => { if (!state.musicFound.has(`music-s-${idx}`)) { state.musicFound.add(`music-s-${idx}`); addScore(5); } updateHUD(); };
sGrid.appendChild(card);
});
}
function buildIPA() {
const grid = document.getElementById('ipaGrid');
ipaAlphabet.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card ipa-card';
card.innerHTML = `${item.symbol}${item.name}`;
card.onclick = () => { if (!state.ipaFound.has(`ipa-${idx}`)) { state.ipaFound.add(`ipa-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildChroma() {
const grid = document.getElementById('chromaGrid');
chromaColors.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card chroma-card';
card.style.setProperty('--card-color', item.hex);
card.innerHTML = `${item.emoji}${item.name}${item.hex}`;
card.onclick = () => { if (!state.chromaFound.has(`chroma-${idx}`)) { state.chromaFound.add(`chroma-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildMedical() {
const grid = document.getElementById('medicalGrid');
medicalTerms.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card medical-card';
card.innerHTML = `${item.term}${item.area}`;
card.onclick = () => { if (!state.medicalFound.has(`medical-${idx}`)) { state.medicalFound.add(`medical-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildBinary() {
const grid = document.getElementById('binaryGrid');
binaryNumbers.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card binary-card';
card.innerHTML = `${item.dec}${item.bin}Hex: ${item.hex}`;
card.onclick = () => { if (!state.binaryFound.has(`binary-${idx}`)) { state.binaryFound.add(`binary-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildOctal() {
const grid = document.getElementById('octalGrid');
octalNumbers.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card octal-card';
card.innerHTML = `${item.dec}${item.oct}Hex: ${item.hex}`;
card.onclick = () => { if (!state.octalFound.has(`octal-${idx}`)) { state.octalFound.add(`octal-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildDecimal() {
const grid = document.getElementById('decimalGrid');
decimalNumbers.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card decimal-card';
card.innerHTML = `${item.dec.toLocaleString('pt-BR')}${item.sci}`;
card.onclick = () => { if (!state.decimalFound.has(`decimal-${idx}`)) { state.decimalFound.add(`decimal-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
}
function buildHex() {
const grid = document.getElementById('hexGrid');
hexDigits.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card hex-card';
card.innerHTML = `${item.dec}${item.hex}${item.bin}`;
card.onclick = () => { if (!state.hexFound.has(`hex-digit-${idx}`)) { state.hexFound.add(`hex-digit-${idx}`); addScore(5); } updateHUD(); };
grid.appendChild(card);
});
const numGrid = document.getElementById('hexNumbersGrid');
hexNumbers.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card hex-card';
card.innerHTML = `${item.dec.toLocaleString('pt-BR')}${item.hex}${item.desc}`;
card.onclick = () => { if (!state.hexFound.has(`hex-num-${idx}`)) { state.hexFound.add(`hex-num-${idx}`); addScore(5); } updateHUD(); };
numGrid.appendChild(card);
});
}
function buildAscii() {
const upperGrid = document.getElementById('asciiUpperGrid');
asciiUpper.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card ascii-card';
card.innerHTML = `${item.char}${item.dec}${item.hex}`;
card.onclick = () => { if (!state.asciiFound.has(`ascii-upper-${idx}`)) { state.asciiFound.add(`ascii-upper-${idx}`); addScore(5); } updateHUD(); };
upperGrid.appendChild(card);
});
const lowerGrid = document.getElementById('asciiLowerGrid');
asciiLower.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card ascii-card';
card.innerHTML = `${item.char}${item.dec}${item.hex}`;
card.onclick = () => { if (!state.asciiFound.has(`ascii-lower-${idx}`)) { state.asciiFound.add(`ascii-lower-${idx}`); addScore(5); } updateHUD(); };
lowerGrid.appendChild(card);
});
}
// ====== CONSTRUÇÃO HTML ======
function buildHtml() {
const tagsGrid = document.getElementById('htmlTagsGrid');
htmlTags.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card html-card';
card.innerHTML = `${item.tag}${item.desc}`;
card.onclick = () => showHtmlInfo(item, `html-tag-${idx}`);
tagsGrid.appendChild(card);
});
const colorsGrid = document.getElementById('htmlColorsGrid');
htmlColors.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'letter-card html-card';
card.innerHTML = `
${item.name}
${item.pt}
`;
card.onclick = () => {
document.getElementById('htmlDisplayTag').textContent = item.name;
document.getElementById('htmlDisplayDesc').textContent = `Cor HTML: ${item.pt}`;
document.getElementById('htmlDisplayEx').textContent = `Exemplo: style="color: ${item.name};"`;
if (!state.htmlFound.has(`html-color-${idx}`)) {
state.htmlFound.add(`html-color-${idx}`);
addScore(5);
notify(`Cor HTML "${item.name}" descoberta! +5 pts 🌐`);
}
updateHUD();
};
colorsGrid.appendChild(card);
});
}
function showHtmlInfo(item, uniqueId) {
document.getElementById('htmlDisplayTag').textContent = item.tag;
document.getElementById('htmlDisplayTag').style.animation = 'none';
setTimeout(() => document.getElementById('htmlDisplayTag').style.animation = 'pulse 0.5s ease 3', 10);
document.getElementById('htmlDisplayDesc').textContent = item.desc;
document.getElementById('htmlDisplayEx').textContent = `Exemplo: ${item.ex}`;
if (!state.htmlFound.has(uniqueId)) {
state.htmlFound.add(uniqueId); addScore(5);
notify(`Tag ${item.tag} descoberta! +5 pts 🌐`);
document.querySelectorAll('.html-card').forEach(card => {
if (card.querySelector('.html-tag').textContent === item.tag) {
card.style.background = 'linear-gradient(135deg, #6a1a00, #8a2a00)';
card.style.borderColor = '#fff';
}
});
if (state.htmlFound.size === (htmlTags.length + htmlColors.length)) {
addAchievement(); notify('🏆 CONQUISTA: Mestre do HTML5! +200 pts'); addScore(200);
}
}
updateHUD();
}
function buildQuiz(data, containerId, lang) {
const container = document.getElementById(containerId);
data.forEach((q, qi) => {
const div = document.createElement('div'); div.className = 'quiz-question';
div.innerHTML = `${q.q}
`;
container.appendChild(div);
const optsDiv = div.querySelector('.options');
q.opts.forEach((opt, oi) => {
const btn = document.createElement('button'); btn.className = 'option';
btn.textContent = `${String.fromCharCode(65+oi)}) ${opt}`;
btn.onclick = () => answerQuiz(lang, qi, oi, btn, q.correct);
optsDiv.appendChild(btn);
});
});
}
function answerQuiz(lang, qi, oi, btn, correctIdx) {
if (state.quizAnswered[lang].has(qi)) return;
state.quizAnswered[lang].add(qi);
const allBtns = document.querySelectorAll(`#opts-${lang}-${qi} .option`);
allBtns.forEach((b, i) => {
b.disabled = true;
if (i === correctIdx) b.classList.add('correct');
else if (i === oi) b.classList.add('wrong');
});
if (oi === correctIdx) { addScore(20); notify('✅ Resposta correta! +20 pts'); }
else { notify('❌ Resposta incorreta!', true); }
const totalQ = lang === 'html' ? htmlQuiz.length : 10;
if (state.quizAnswered[lang].size === totalQ) {
addAchievement();
const names = {libras:'LIBRAS', braille:'Braille', morse:'Morse', music:'Musical', ipa:'IPA', chroma:'Cromático', medical:'Médico', binary:'Binário', octal:'Octal', decimal:'Decimal', hex:'Hexadecimal', ascii:'ASCII', html:'HTML'};
notify(`🏆 CONQUISTA: Quiz ${names[lang]} Completo!`);
}
updateHUD();
}
// ====== CONVERSOR HTML ======
function convertTextToHtml() {
const text = document.getElementById('textToHtmlInput').value;
if (!text) {
document.getElementById('htmlPOutput').textContent = '...';
document.getElementById('htmlH1Output').textContent = '...';
return;
}
document.getElementById('htmlPOutput').textContent = `${text}
`;
document.getElementById('htmlH1Output').textContent = `${text}
`;
}
function tryHtmlSecret() {
const text = document.getElementById('textToHtmlInput').value.toUpperCase().trim();
const valid = ['HTML', 'WEB', 'LINK', 'DIV', 'TAG'];
if (valid.includes(text)) {
if (!state.htmlSecrets.has(text)) {
state.htmlSecrets.add(text);
addScore(30);
addAchievement();
notify(`🎁 Palavra "${text}" estruturada em HTML com sucesso! +30 pts 🌐`);
if (state.htmlSecrets.size >= 3) {
notify('🏆 CONQUISTA: Desenvolvedor Front-end Expert!');
}
} else {
notify(`Você já estruturou "${text}"!`);
}
} else {
notify('Tente digitar: HTML, WEB, LINK, DIV ou TAG', true);
}
}
// ====== INICIALIZAÇÃO ======
buildLibras(); buildBraille(); buildMorse(); buildMusic(); buildIPA();
buildChroma(); buildMedical(); buildBinary(); buildOctal(); buildDecimal(); buildHex(); buildAscii(); buildHtml();
buildQuiz(htmlQuiz, 'htmlQuiz', 'html');
updateHUD();
const style = document.createElement('style');
style.innerHTML = `@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }`;
document.head.appendChild(style);
setTimeout(() => notify('🌐 Bem-vindo ao mundo da marcação HTML! Explore a aba HTML.'), 500);
- ', '
- ', '
- '], correct:1},
{q:'9. A W3C (World Wide Web Consortium) padroniza HTML. Qual área acadêmica estuda essas especificações?', opts:['História da Arte', 'Ciência da Computação e Engenharia Web', 'Biologia Marinha', 'Sociologia Rural'], correct:1},
{q:'10. Quem é creditado como o criador da World Wide Web e do HTML?', opts:['Bill Gates', 'Steve Jobs', 'Tim Berners-Lee', 'Mark Zuckerberg'], correct:2}
];
// ====== ESTADO DO JOGO ======
let state = {
score: 0, level: 1, achievements: 0,
lettersFound: new Set(), librasFound: new Set(), brailleFound: new Set(),
morseFound: new Set(), musicFound: new Set(), ipaFound: new Set(), chromaFound: new Set(),
medicalFound: new Set(), binaryFound: new Set(), octalFound: new Set(),
decimalFound: new Set(), hexFound: new Set(), asciiFound: new Set(), htmlFound: new Set(),
quizAnswered: {
libras: new Set(), braille: new Set(), morse: new Set(), music: new Set(),
ipa: new Set(), chroma: new Set(), medical: new Set(), binary: new Set(),
octal: new Set(), decimal: new Set(), hex: new Set(), ascii: new Set(), html: new Set()
},
unitCompleted: false, htmlSecrets: new Set()
};
// ====== FUNÇÕES ======
function updateHUD() {
document.getElementById('score').textContent = state.score;
document.getElementById('level').textContent = 1 + Math.floor(state.score / 150);
document.getElementById('achievements').textContent = state.achievements;
const total = state.librasFound.size + state.brailleFound.size + state.morseFound.size +
state.musicFound.size + state.ipaFound.size + state.chromaFound.size +
state.medicalFound.size + state.binaryFound.size + state.octalFound.size +
state.decimalFound.size + state.hexFound.size + state.asciiFound.size + state.htmlFound.size;
document.getElementById('lettersFound').textContent = Math.min(total, 880);
}
function addScore(pts) { state.score += pts; updateHUD(); }
function addAchievement() { state.achievements++; updateHUD(); }
function notify(msg, bad=false) {
const n = document.getElementById('notification');
n.textContent = msg; n.classList.toggle('bad', bad); n.classList.add('show');
setTimeout(() => n.classList.remove('show'), 2500);
}
function switchTab(lang) {
document.querySelectorAll('.lang-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.lang-content').forEach(c => c.classList.remove('active'));
event.target.classList.add('active');
document.getElementById(lang).classList.add('active');
}
function completeHtmlUnit() {
if (!state.unitCompleted) {
state.unitCompleted = true; addScore(500); addAchievement();
notify('🏆 UNIDADE HTML CONCLUÍDA! +500 pts');
} else { notify('Você já concluiu esta unidade!'); }
}
// ====== CONSTRUÇÃO GRIDs ======
function buildLibras() {
const grid = document.getElementById('librasGrid');
librasAlphabet.forEach((item, idx) => {
const card = document.createElement('div'); card.className = 'letter-card libras-card';
card.innerHTML = `
${item.emoji}${item.l}`; card.onclick = () => { if (!state.librasFound.has(`libras-${idx}`)) { state.librasFound.add(`libras-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildBraille() { const grid = document.getElementById('brailleGrid'); brailleAlphabet.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card braille-card'; card.innerHTML = `${item.char}${item.l}`; card.onclick = () => { if (!state.brailleFound.has(`braille-${idx}`)) { state.brailleFound.add(`braille-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildMorse() { const grid = document.getElementById('morseGrid'); morseAlphabet.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card morse-card'; card.innerHTML = `${item.l}${item.code}`; card.onclick = () => { if (!state.morseFound.has(`morse-${idx}`)) { state.morseFound.add(`morse-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildMusic() { const nGrid = document.getElementById('musicNotesGrid'); musicNotes.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card music-card'; card.innerHTML = `${item.symbol}${item.name}`; card.onclick = () => { if (!state.musicFound.has(`music-n-${idx}`)) { state.musicFound.add(`music-n-${idx}`); addScore(5); } updateHUD(); }; nGrid.appendChild(card); }); const sGrid = document.getElementById('musicSymbolsGrid'); musicSymbols.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card music-card'; card.style.minHeight = '90px'; card.innerHTML = `${item.symbol}${item.name}`; card.onclick = () => { if (!state.musicFound.has(`music-s-${idx}`)) { state.musicFound.add(`music-s-${idx}`); addScore(5); } updateHUD(); }; sGrid.appendChild(card); }); } function buildIPA() { const grid = document.getElementById('ipaGrid'); ipaAlphabet.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card ipa-card'; card.innerHTML = `${item.symbol}${item.name}`; card.onclick = () => { if (!state.ipaFound.has(`ipa-${idx}`)) { state.ipaFound.add(`ipa-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildChroma() { const grid = document.getElementById('chromaGrid'); chromaColors.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card chroma-card'; card.style.setProperty('--card-color', item.hex); card.innerHTML = `${item.emoji}${item.name}${item.hex}`; card.onclick = () => { if (!state.chromaFound.has(`chroma-${idx}`)) { state.chromaFound.add(`chroma-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildMedical() { const grid = document.getElementById('medicalGrid'); medicalTerms.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card medical-card'; card.innerHTML = `${item.term}${item.area}`; card.onclick = () => { if (!state.medicalFound.has(`medical-${idx}`)) { state.medicalFound.add(`medical-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildBinary() { const grid = document.getElementById('binaryGrid'); binaryNumbers.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card binary-card'; card.innerHTML = `${item.dec}${item.bin}Hex: ${item.hex}`; card.onclick = () => { if (!state.binaryFound.has(`binary-${idx}`)) { state.binaryFound.add(`binary-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildOctal() { const grid = document.getElementById('octalGrid'); octalNumbers.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card octal-card'; card.innerHTML = `${item.dec}${item.oct}Hex: ${item.hex}`; card.onclick = () => { if (!state.octalFound.has(`octal-${idx}`)) { state.octalFound.add(`octal-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildDecimal() { const grid = document.getElementById('decimalGrid'); decimalNumbers.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card decimal-card'; card.innerHTML = `${item.dec.toLocaleString('pt-BR')}${item.sci}`; card.onclick = () => { if (!state.decimalFound.has(`decimal-${idx}`)) { state.decimalFound.add(`decimal-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); } function buildHex() { const grid = document.getElementById('hexGrid'); hexDigits.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card hex-card'; card.innerHTML = `${item.dec}${item.hex}${item.bin}`; card.onclick = () => { if (!state.hexFound.has(`hex-digit-${idx}`)) { state.hexFound.add(`hex-digit-${idx}`); addScore(5); } updateHUD(); }; grid.appendChild(card); }); const numGrid = document.getElementById('hexNumbersGrid'); hexNumbers.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card hex-card'; card.innerHTML = `${item.dec.toLocaleString('pt-BR')}${item.hex}${item.desc}`; card.onclick = () => { if (!state.hexFound.has(`hex-num-${idx}`)) { state.hexFound.add(`hex-num-${idx}`); addScore(5); } updateHUD(); }; numGrid.appendChild(card); }); } function buildAscii() { const upperGrid = document.getElementById('asciiUpperGrid'); asciiUpper.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card ascii-card'; card.innerHTML = `${item.char}${item.dec}${item.hex}`; card.onclick = () => { if (!state.asciiFound.has(`ascii-upper-${idx}`)) { state.asciiFound.add(`ascii-upper-${idx}`); addScore(5); } updateHUD(); }; upperGrid.appendChild(card); }); const lowerGrid = document.getElementById('asciiLowerGrid'); asciiLower.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card ascii-card'; card.innerHTML = `${item.char}${item.dec}${item.hex}`; card.onclick = () => { if (!state.asciiFound.has(`ascii-lower-${idx}`)) { state.asciiFound.add(`ascii-lower-${idx}`); addScore(5); } updateHUD(); }; lowerGrid.appendChild(card); }); } // ====== CONSTRUÇÃO HTML ====== function buildHtml() { const tagsGrid = document.getElementById('htmlTagsGrid'); htmlTags.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card html-card'; card.innerHTML = `${item.tag}${item.desc}`; card.onclick = () => showHtmlInfo(item, `html-tag-${idx}`); tagsGrid.appendChild(card); }); const colorsGrid = document.getElementById('htmlColorsGrid'); htmlColors.forEach((item, idx) => { const card = document.createElement('div'); card.className = 'letter-card html-card'; card.innerHTML = `${item.name}${item.pt}`; card.onclick = () => { document.getElementById('htmlDisplayTag').textContent = item.name; document.getElementById('htmlDisplayDesc').textContent = `Cor HTML: ${item.pt}`; document.getElementById('htmlDisplayEx').textContent = `Exemplo: style="color: ${item.name};"`; if (!state.htmlFound.has(`html-color-${idx}`)) { state.htmlFound.add(`html-color-${idx}`); addScore(5); notify(`Cor HTML "${item.name}" descoberta! +5 pts 🌐`); } updateHUD(); }; colorsGrid.appendChild(card); }); } function showHtmlInfo(item, uniqueId) { document.getElementById('htmlDisplayTag').textContent = item.tag; document.getElementById('htmlDisplayTag').style.animation = 'none'; setTimeout(() => document.getElementById('htmlDisplayTag').style.animation = 'pulse 0.5s ease 3', 10); document.getElementById('htmlDisplayDesc').textContent = item.desc; document.getElementById('htmlDisplayEx').textContent = `Exemplo: ${item.ex}`; if (!state.htmlFound.has(uniqueId)) { state.htmlFound.add(uniqueId); addScore(5); notify(`Tag ${item.tag} descoberta! +5 pts 🌐`); document.querySelectorAll('.html-card').forEach(card => { if (card.querySelector('.html-tag').textContent === item.tag) { card.style.background = 'linear-gradient(135deg, #6a1a00, #8a2a00)'; card.style.borderColor = '#fff'; } }); if (state.htmlFound.size === (htmlTags.length + htmlColors.length)) { addAchievement(); notify('🏆 CONQUISTA: Mestre do HTML5! +200 pts'); addScore(200); } } updateHUD(); } function buildQuiz(data, containerId, lang) { const container = document.getElementById(containerId); data.forEach((q, qi) => { const div = document.createElement('div'); div.className = 'quiz-question'; div.innerHTML = `${q.q}
`; container.appendChild(div); const optsDiv = div.querySelector('.options'); q.opts.forEach((opt, oi) => { const btn = document.createElement('button'); btn.className = 'option'; btn.textContent = `${String.fromCharCode(65+oi)}) ${opt}`; btn.onclick = () => answerQuiz(lang, qi, oi, btn, q.correct); optsDiv.appendChild(btn); }); }); } function answerQuiz(lang, qi, oi, btn, correctIdx) { if (state.quizAnswered[lang].has(qi)) return; state.quizAnswered[lang].add(qi); const allBtns = document.querySelectorAll(`#opts-${lang}-${qi} .option`); allBtns.forEach((b, i) => { b.disabled = true; if (i === correctIdx) b.classList.add('correct'); else if (i === oi) b.classList.add('wrong'); }); if (oi === correctIdx) { addScore(20); notify('✅ Resposta correta! +20 pts'); } else { notify('❌ Resposta incorreta!', true); } const totalQ = lang === 'html' ? htmlQuiz.length : 10; if (state.quizAnswered[lang].size === totalQ) { addAchievement(); const names = {libras:'LIBRAS', braille:'Braille', morse:'Morse', music:'Musical', ipa:'IPA', chroma:'Cromático', medical:'Médico', binary:'Binário', octal:'Octal', decimal:'Decimal', hex:'Hexadecimal', ascii:'ASCII', html:'HTML'}; notify(`🏆 CONQUISTA: Quiz ${names[lang]} Completo!`); } updateHUD(); } // ====== CONVERSOR HTML ====== function convertTextToHtml() { const text = document.getElementById('textToHtmlInput').value; if (!text) { document.getElementById('htmlPOutput').textContent = '...'; document.getElementById('htmlH1Output').textContent = '...'; return; } document.getElementById('htmlPOutput').textContent = `${text}
`; document.getElementById('htmlH1Output').textContent = `${text}
`; } function tryHtmlSecret() { const text = document.getElementById('textToHtmlInput').value.toUpperCase().trim(); const valid = ['HTML', 'WEB', 'LINK', 'DIV', 'TAG']; if (valid.includes(text)) { if (!state.htmlSecrets.has(text)) { state.htmlSecrets.add(text); addScore(30); addAchievement(); notify(`🎁 Palavra "${text}" estruturada em HTML com sucesso! +30 pts 🌐`); if (state.htmlSecrets.size >= 3) { notify('🏆 CONQUISTA: Desenvolvedor Front-end Expert!'); } } else { notify(`Você já estruturou "${text}"!`); } } else { notify('Tente digitar: HTML, WEB, LINK, DIV ou TAG', true); } } // ====== INICIALIZAÇÃO ====== buildLibras(); buildBraille(); buildMorse(); buildMusic(); buildIPA(); buildChroma(); buildMedical(); buildBinary(); buildOctal(); buildDecimal(); buildHex(); buildAscii(); buildHtml(); buildQuiz(htmlQuiz, 'htmlQuiz', 'html'); updateHUD(); const style = document.createElement('style'); style.innerHTML = `@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }`; document.head.appendChild(style); setTimeout(() => notify('🌐 Bem-vindo ao mundo da marcação HTML! Explore a aba HTML.'), 500);

Feito com
Nenhum comentário:
Postar um comentário