<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post Interativo - Pegada de Carbono</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #0b1329; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.slide-trans { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.slide-card {
width: 100%; height: 100%; flex-shrink: 0; display: flex; flex-direction: column;
justify-content: space-between; padding: 1.25rem; position: relative; user-select: none;
background: linear-gradient(to bottom, #020617, #061f14, #020617);
}
.btn-source {
background-color: #0f172a; border: 1px solid #1e293b; padding: 0.5rem;
border-radius: 0.5rem; text-align: left; transition: all 0.2s;
}
.btn-source:hover { background-color: rgba(16,185,129,0.1); border-color: #10b981; }
</style>
</head>
<body class="text-slate-100 min-h-screen flex items-center justify-center p-3 md:p-6">
<div class="w-full max-w-5xl flex flex-col lg:flex-row items-center justify-center gap-6 lg:gap-12">
<!-- CELULAR INTERATIVO -->
<div class="w-full max-w-sm shrink-0">
<div class="bg-black border border-slate-800 rounded-[36px] overflow-hidden shadow-2xl relative flex flex-col mx-auto" style="height: 740px;">
<!-- Status Bar -->
<div class="px-5 py-2 flex justify-between items-center bg-black text-[10px] text-slate-400 select-none">
<span>18:18</span>
<div class="px-2 py-0.5 bg-slate-950 rounded-full border border-slate-800 text-[8px] text-emerald-400 font-bold uppercase tracking-wider">Eco-Post 🟢</div>
<div class="flex items-center gap-1"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><i class="fas fa-battery-three-quarters"></i></div>
</div>
<!-- Insta Header -->
<div class="px-4 py-2 flex items-center justify-between border-b border-slate-900 bg-slate-950">
<div class="flex items-center gap-2.5">
<div class="w-8 h-8 rounded-full ring-2 ring-emerald-500 p-[1.5px] bg-slate-900 flex items-center justify-center">🌱</div>
<div>
<div class="flex items-center gap-1">
<span class="font-bold text-xs text-white">eco.consciente</span>
<i class="fas fa-check-circle text-sky-400 text-[10px]"></i>
</div>
<span class="text-[9px] text-slate-500 block">Educação Ambiental</span>
</div>
</div>
<button onclick="openQr()" class="text-slate-400 hover:text-emerald-400 text-[10px] bg-slate-900 px-2.5 py-1 rounded-full border border-slate-800 flex items-center gap-1">
<i class="fas fa-qrcode"></i> <span>QR</span>
</button>
</div>
<!-- Slides e Conteúdo -->
<div class="relative overflow-hidden bg-slate-950 flex-grow flex flex-col justify-between">
<div class="relative flex-grow flex items-center justify-center overflow-hidden h-[360px]">
<div id="slides-wrapper" class="flex h-full w-full slide-trans">
<!-- S1: Capa -->
<div class="slide-card">
<span class="text-[9px] font-bold text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800/30 self-start">🌿 Introdução</span>
<div class="my-auto space-y-2">
<h2 class="text-2xl font-black text-white leading-tight">Você sabe o tamanho da sua <span class="bg-gradient-to-r from-emerald-400 to-green-300 bg-clip-text text-transparent">Pegada de Carbono?</span></h2>
<p class="text-xs text-slate-300">Não é o tamanho do seu sapato, mas o impacto que as suas escolhas diárias deixam no planeta. 👣🌎</p>
</div>
<div class="flex justify-between text-[10px] text-slate-500"><span class="text-emerald-400 animate-pulse">➔ Arraste</span><span>1/6</span></div>
</div>
<!-- S2: O que é -->
<div class="slide-card">
<span class="text-[9px] font-bold text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800/30 self-start">💡 Conceito</span>
<div class="my-auto space-y-2">
<h3 class="text-lg font-bold text-white">Afinal, o que é isso?</h3>
<p class="text-xs text-slate-300">É a soma de todos os gases de efeito estufa (como o CO₂) que liberamos na atmosfera devido aos nossos hábitos.</p>
<div class="bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/50 flex items-center gap-2">
<span class="text-xl">💨</span>
<p class="text-[9px] text-slate-400">Cada transporte, comida e energia usada somam gases que aquecem a nossa atmosfera.</p>
</div>
</div>
<div class="flex justify-end text-[10px] text-slate-500"><span>2/6 ➔</span></div>
</div>
<!-- S3: Fontes -->
<div class="slide-card">
<span class="text-[9px] font-bold text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800/30 self-start">🔥 Principais Fontes</span>
<div class="my-auto space-y-2">
<h3 class="text-xs font-bold text-white text-center">Selecione uma fonte para analisar:</h3>
<div class="grid grid-cols-2 gap-2">
<button onclick="selSrc('transporte', this)" class="btn-source active:scale-95 text-[10px] font-bold">🚗 Transporte</button>
<button onclick="selSrc('dieta', this)" class="btn-source active:scale-95 text-[10px] font-bold">🥩 Alimentação</button>
<button onclick="selSrc('energia', this)" class="btn-source active:scale-95 text-[10px] font-bold">🔌 Energia</button>
<button onclick="selSrc('consumo', this)" class="btn-source active:scale-95 text-[10px] font-bold">🛍️ Compras</button>
</div>
<div id="src-detail" class="bg-emerald-950/20 border border-emerald-500/20 text-emerald-400 text-[10px] p-2 rounded-lg text-center min-h-[44px] flex items-center justify-center">Escolha uma opção acima! 👆</div>
</div>
<div class="flex justify-end text-[10px] text-slate-500"><span>3/6 ➔</span></div>
</div>
<!-- S4: Quiz -->
<div class="slide-card">
<span class="text-[9px] font-bold text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800/30 self-start">📊 Teste Rápido</span>
<div class="my-auto space-y-2.5">
<div id="qz-intro" class="text-center space-y-2">
<h3 class="text-xs font-bold text-white">Qual é o seu impacto no planeta?</h3>
<button onclick="startQz()" class="w-full py-2 bg-emerald-500 text-slate-950 font-bold rounded-lg hover:bg-emerald-400 text-xs transition">Iniciar Calculadora</button>
</div>
<div id="qz-box" class="hidden space-y-2">
<h4 id="qz-q" class="text-[10px] font-bold text-white">Pergunta</h4>
<div class="space-y-1" id="qz-opts"></div>
</div>
<div id="qz-res" class="hidden text-center space-y-1">
<div id="qz-badge" class="text-xs font-black py-1 rounded bg-emerald-500/15 text-emerald-400">Resultado</div>
<p id="qz-text" class="text-[9px] text-slate-300"></p>
<button onclick="resetQz()" class="text-[9px] text-emerald-400 underline block mx-auto">Refazer</button>
</div>
</div>
<div class="flex justify-end text-[10px] text-slate-500"><span>4/6 ➔</span></div>
</div>
<!-- S5: Soluções -->
<div class="slide-card">
<span class="text-[9px] font-bold text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800/30 self-start">🌿 Soluções Práticas</span>
<div class="my-auto space-y-1.5 text-[10px] text-slate-300">
<div class="flex items-center gap-2 bg-slate-900/60 p-2 rounded-lg border border-slate-800">🚴 <span>Prefira bike ou caminhada para caminhos curtos.</span></div>
<div class="flex items-center gap-2 bg-slate-900/60 p-2 rounded-lg border border-slate-800">🥦 <span>Adote a "Segunda Sem Carne" para poupar recursos.</span></div>
<div class="flex items-center gap-2 bg-slate-900/60 p-2 rounded-lg border border-slate-800">🔌 <span>Desligue aparelhos que não estão sendo utilizados.</span></div>
</div>
<div class="flex justify-end text-[10px] text-slate-500"><span>5/6 ➔</span></div>
</div>
<!-- S6: CTA -->
<div class="slide-card text-center">
<span class="text-[9px] font-bold text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800/30 self-start">🚀 Desafio</span>
<div class="my-auto space-y-2">
<div class="text-xl">🌎</div>
<h3 class="text-sm font-bold text-white">E agora, qual será sua atitude?</h3>
<p class="text-[10px] text-slate-400 max-w-[220px] mx-auto">Toda grande mudança começa com um pequeno passo consciente no dia a dia.</p>
<div class="flex flex-col gap-1.5 max-w-[180px] mx-auto pt-1">
<div class="flex gap-1.5">
<button onclick="like()" class="flex-1 py-1 bg-slate-900 text-rose-500 border border-slate-800 rounded-lg text-[9px] font-bold"><i class="fas fa-heart"></i> Curtir</button>
<button onclick="save()" class="flex-1 py-1 bg-slate-900 text-emerald-400 border border-slate-800 rounded-lg text-[9px] font-bold"><i class="fas fa-bookmark"></i> Salvar</button>
</div>
<button onclick="openQr()" class="w-full py-1 bg-emerald-500 text-slate-950 rounded-lg text-[9px] font-extrabold"><i class="fas fa-qrcode"></i> Compartilhar via QR</button>
</div>
</div>
<span class="text-[8px] text-slate-600 block">eco.consciente • 2026</span>
</div>
</div>
<!-- Setas -->
<button onclick="prev()" class="absolute left-2 w-6 h-6 rounded-full bg-black/60 border border-slate-800 text-white flex items-center justify-center text-[10px] z-10"><i class="fas fa-chevron-left"></i></button>
<button onclick="next()" class="absolute right-2 w-6 h-6 rounded-full bg-black/60 border border-slate-800 text-white flex items-center justify-center text-[10px] z-10"><i class="fas fa-chevron-right"></i></button>
</div>
<!-- Rodapé Ações -->
<div class="bg-slate-950 px-4 py-2 border-t border-slate-900">
<div class="flex items-center justify-between mb-1">
<div class="flex items-center gap-3 text-base">
<button onclick="like()" id="act-lk" class="text-slate-200 hover:text-rose-500"><i class="far fa-heart"></i></button>
<button onclick="focusComment()" class="text-slate-200"><i class="far fa-comment"></i></button>
<button onclick="openQr()" class="text-slate-200 hover:text-emerald-400"><i class="far fa-paper-plane"></i></button>
</div>
<div class="flex gap-1" id="dots-box">
<span class="w-2.5 h-1 rounded-full bg-emerald-500 transition-all"></span>
<span class="w-1 h-1 rounded-full bg-slate-700 transition-all"></span>
<span class="w-1 h-1 rounded-full bg-slate-700 transition-all"></span>
<span class="w-1 h-1 rounded-full bg-slate-700 transition-all"></span>
<span class="w-1 h-1 rounded-full bg-slate-700 transition-all"></span>
<span class="w-1 h-1 rounded-full bg-slate-700 transition-all"></span>
</div>
<button onclick="save()" id="act-sv" class="text-slate-200 hover:text-emerald-400"><i class="far fa-bookmark"></i></button>
</div>
<div class="text-[9px] font-bold text-white"><span id="lk-cnt">2.418</span> curtidas</div>
</div>
</div>
<!-- Comentários -->
<div class="h-[130px] bg-slate-950 border-t border-slate-900 p-3 flex flex-col justify-between overflow-hidden">
<div id="cmt-box" class="space-y-1 overflow-y-auto no-scrollbar flex-grow text-[9px]">
<div><span class="font-bold text-emerald-400 mr-1">sustenta_info</span><span class="text-slate-300">Que post incrível para apresentar na escola! 🌱</span></div>
<div><span class="font-bold text-slate-300 mr-1">mari_eco</span><span class="text-slate-300">Minha pegada deu baixa no quiz!</span></div>
</div>
<div class="mt-1 flex items-center gap-2 border-t border-slate-900 pt-1.5">
<input type="text" id="cmt-input" placeholder="Comente..." class="bg-transparent text-[9px] text-white placeholder-slate-600 focus:outline-none flex-grow" onkeydown="chkEnter(event)">
<button onclick="postCmt()" class="text-[9px] font-bold text-emerald-400">Publicar</button>
</div>
</div>
<!-- Toast Notification -->
<div id="toast" class="absolute top-12 left-1/2 -translate-x-1/2 bg-emerald-500 text-black font-semibold text-[9px] px-3 py-1 rounded-full opacity-0 transition-all z-50">Salvo!</div>
<!-- Modal QR Code -->
<div id="qr-modal" class="absolute inset-0 bg-black/95 flex flex-col items-center justify-center p-4 opacity-0 pointer-events-none transition-all z-40">
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 w-full max-w-xs text-center space-y-3 relative">
<button onclick="closeQr()" class="absolute top-2 right-2 text-slate-400 hover:text-white w-6 h-6 rounded-full bg-slate-950 flex items-center justify-center"><i class="fas fa-times"></i></button>
<h3 class="text-xs font-bold text-white">Escaneie no Celular!</h3>
<div class="bg-white p-2 rounded-lg inline-block mx-auto"><img id="qr-img" class="w-28 h-28 mx-auto"></div>
<div class="flex gap-1.5">
<input type="text" id="qr-input" class="bg-slate-950 border border-slate-800 text-[8px] text-slate-300 rounded px-2 py-1 flex-grow focus:outline-none" onchange="updQr()">
<button onclick="copyUrl()" class="px-2 bg-slate-800 text-[10px] rounded text-slate-300"><i class="far fa-copy"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- PAINEL APRESENTAÇÃO DESKTOP -->
<div class="hidden lg:flex flex-col justify-between bg-slate-950/40 border border-slate-800/80 p-5 rounded-[24px] w-full max-w-xs h-[740px] shadow-xl relative overflow-hidden">
<div class="space-y-2">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
<span class="text-[9px] font-bold text-emerald-400 uppercase tracking-wider">Apresentação Ativa</span>
</div>
<h1 class="text-lg font-black text-white leading-tight">Abra o Post no Celular! 📱</h1>
<p class="text-[9px] text-slate-400">Escaneie o código abaixo com a câmera do seu smartphone para navegar, interagir e responder ao quiz diretamente no seu dispositivo.</p>
</div>
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-3.5 text-center space-y-2">
<div class="bg-white p-2.5 rounded inline-block shadow-lg"><img id="pres-qr" class="w-32 h-32 mx-auto"></div>
<span class="text-[9px] font-bold text-slate-300 block">Compartilhe na sala de aula</span>
</div>
<div class="space-y-1.5">
<div class="bg-slate-900/40 border border-slate-800 rounded-lg p-2 flex items-center justify-between gap-2">
<span id="detected-url" class="text-[8px] text-emerald-400 font-mono truncate flex-grow">Carregando link...</span>
<button onclick="copyPresUrl()" class="px-2 py-0.5 bg-slate-800 hover:bg-slate-700 text-[9px] rounded font-bold text-slate-300 transition shrink-0">Copiar</button>
</div>
<div class="text-[8px] text-slate-500 text-center">Criado para facilitar apresentações escolares. 💚</div>
</div>
</div>
</div>
<script>
let curr = 0;
let liked = false, saved = false, lkCount = 2418;
let qStep = 0, score = 0;
const qzData = [
{
q: "Qual seu transporte diário?",
opts: [
{ t: "🚗 Carro próprio (combustível fóssil)", p: 3 },
{ t: "🚌 Ônibus, metrô ou carona", p: 2 },
{ t: "🚲 Bike ou caminhada", p: 1 }
]
},
{
q: "Como é o seu consumo de carne?",
opts: [
{ t: "🥩 Carne na maioria das refeições", p: 3 },
{ t: "🥚 Pouca carne, muitos vegetais", p: 2 },
{ t: "🌱 Vegetariano ou Vegano", p: 1 }
]
},
{
q: "Como é o consumo de energia em casa?",
opts: [
{ t: "💡 Aparelhos em standby e banhos longos", p: 3 },
{ t: "🔌 Economizo e apago as luzes", p: 2 },
{ t: "☀️ Usamos fontes sustentáveis (solar)", p: 1 }
]
}
];
const srcData = {
transporte: "🚗 Carros comuns emitem ~120g de CO₂ por km. Usar metrô ou ônibus reduz isso em 70%!",
dieta: "🥩 Produzir 1kg de carne bovina emite ~36kg de gases. Dietas baseadas em vegetais poluem 95% menos!",
energia: "🔌 Modo Standby dos aparelhos consome até 12% da eletricidade de uma residência. Desligue-os!",
consumo: "🛍️ A indústria têxtil emite mais que os voos internacionais e navegações marítimas juntos!"
};
function selSrc(k, el) {
document.querySelectorAll('.btn-source').forEach(b => {
b.classList.remove('border-emerald-500', 'bg-emerald-950/20');
b.classList.add('border-slate-800', 'bg-slate-900');
});
el.classList.replace('border-slate-800', 'border-emerald-500');
el.classList.add('bg-emerald-950/20');
document.getElementById('src-detail').textContent = srcData[k];
}
function update() {
document.getElementById('slides-wrapper').style.transform = `translateX(-${curr * 100}%)`;
const dots = document.getElementById('dots-box').children;
for (let i = 0; i < dots.length; i++) {
dots[i].className = i === curr ? "w-2.5 h-1 rounded-full bg-emerald-400 transition-all" : "w-1 h-1 rounded-full bg-slate-700 transition-all";
}
}
function next() { curr = curr < 5 ? curr + 1 : 0; update(); }
function prev() { curr = curr > 0 ? curr - 1 : 5; update(); }
function toggleLike() {
liked = !liked; lkCount += liked ? 1 : -1;
document.querySelector('#act-lk i').className = liked ? "fas fa-heart text-rose-500 scale-110" : "far fa-heart text-slate-200";
document.getElementById('lk-cnt').textContent = lkCount.toLocaleString('pt-BR');
if (liked) toast("Curtido!");
}
function like() { if (!liked) toggleLike(); curr = 5; update(); }
function save() {
saved = !saved;
document.querySelector('#act-sv i').className = saved ? "fas fa-bookmark text-emerald-400" : "far fa-bookmark text-slate-200";
if (saved) toast("Salvo!");
}
function triggerSave() { if (!saved) save(); }
function toast(msg) {
const t = document.getElementById('toast');
t.textContent = msg; t.className = "absolute top-12 left-1/2 -translate-x-1/2 bg-emerald-500 text-black font-semibold text-[9px] px-3 py-1 rounded-full opacity-100 scale-100 transition-all z-50";
setTimeout(() => { t.className = "absolute top-12 left-1/2 -translate-x-1/2 bg-emerald-500 text-black font-semibold text-[9px] px-3 py-1 rounded-full opacity-0 scale-95 pointer-events-none transition-all z-50"; }, 1500);
}
function focusComment() { document.getElementById('cmt-input').focus(); }
function chkEnter(e) { if (e.key === 'Enter') postCmt(); }
function postCmt() {
const i = document.getElementById('cmt-input');
if (!i.value.trim()) return;
const div = document.createElement('div');
div.innerHTML = `<span class="font-bold text-emerald-400 mr-1">você</span><span class="text-slate-300">${i.value}</span>`;
document.getElementById('cmt-box').appendChild(div);
document.getElementById('cmt-box').scrollTop = document.getElementById('cmt-box').scrollHeight;
i.value = "";
}
// Quiz Logic
function startQz() {
document.getElementById('qz-intro').classList.add('hidden');
document.getElementById('qz-box').classList.remove('hidden');
qStep = 0; score = 0; showQ();
}
function showQ() {
const d = qzData[qStep];
document.getElementById('qz-q').textContent = `Pergunta ${qStep + 1} de 3: ${d.q}`;
const opts = document.getElementById('qz-opts');
opts.innerHTML = '';
d.opts.forEach(o => {
const b = document.createElement('button');
b.className = "w-full text-left text-[9px] bg-slate-900 border border-slate-800 p-1.5 rounded-lg text-slate-300 hover:text-emerald-400 hover:border-emerald-500 transition";
b.textContent = o.t;
b.onclick = () => { score += o.p; qStep++; if (qStep < qzData.length) { showQ(); } else { showRes(); } };
opts.appendChild(b);
});
}
function showRes() {
document.getElementById('qz-box').classList.add('hidden');
document.getElementById('qz-res').classList.remove('hidden');
const b = document.getElementById('qz-badge');
const t = document.getElementById('qz-text');
if (score <= 4) {
b.textContent = "Baixo Impacto! 🌱"; b.className = "text-xs font-black py-1 rounded bg-emerald-500/20 text-emerald-400";
t.textContent = "Suas escolhas diárias estão em harmonia com o planeta.";
} else if (score <= 7) {
b.textContent = "Médio Impacto! ⚡"; b.className = "text-xs font-black py-1 rounded bg-amber-500/20 text-amber-400";
t.textContent = "Você está no caminho certo, mas ainda pode reduzir o consumo de recursos.";
} else {
b.textContent = "Alto Impacto! 🔥"; b.className = "text-xs font-black py-1 rounded bg-rose-500/20 text-rose-400";
t.textContent = "Sua pegada está bem alta. Que tal adotar uma Segunda Sem Carne?";
}
}
function resetQz() {
document.getElementById('qz-res').classList.add('hidden');
document.getElementById('qz-intro').classList.remove('hidden');
}
// QR Code Setup
function getUrl() {
let u = window.location.href;
return (u.startsWith('file://') || u.includes('127.0.0.1')) ? 'https://seu-dominio-sustentavel.com' : u;
}
function openQr() {
const u = getUrl();
document.getElementById('qr-input').value = u;
document.getElementById('qr-img').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(u)}&color=059669`;
document.getElementById('qr-modal').classList.remove('opacity-0', 'pointer-events-none');
document.getElementById('qr-modal-content').classList.replace('scale-90', 'scale-100');
}
function closeQr() {
document.getElementById('qr-modal').classList.add('opacity-0', 'pointer-events-none');
}
function updQr() {
const u = document.getElementById('qr-input').value || 'https://seu-dominio-sustentavel.com';
document.getElementById('qr-img').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(u)}&color=059669`;
toast("Atualizado!");
}
function copyUrl() {
const i = document.getElementById('qr-input');
i.select(); document.execCommand('copy'); toast("Copiado!");
}
function copyPresUrl() {
const temp = document.createElement('input'); temp.value = getUrl();
document.body.appendChild(temp); temp.select(); document.execCommand('copy');
document.body.removeChild(temp); toast("Link Copiado!");
}
window.onload = function() {
const u = getUrl();
if (document.getElementById('detected-url')) document.getElementById('detected-url').textContent = u;
if (document.getElementById('pres-qr')) document.getElementById('pres-qr').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(u)}&color=059669`;
}
</script>
</body>
</html>