Envie sua contribuição – Novas economias, uso da tecnologia e atividades portuárias

document.addEventListener("DOMContentLoaded", function () {

const campo = document.getElementById("edit-submitted-contribuicao");
const limite = 600; // <– defina aqui o limite desejado

// Criar elementos dinamicamente —————————-
const wrapper = document.createElement("div");
wrapper.id = "contador-wrapper";
wrapper.style.marginTop = "5px";

const texto = document.createElement("div");
texto.id = "contador-texto";
texto.style.fontSize = "14px";
texto.style.marginBottom = "4px";

const barraContainer = document.createElement("div");
barraContainer.id = "contador-barra";
barraContainer.style.height = "8px";
barraContainer.style.width = "100%";
barraContainer.style.background = "#e0e0e0";
barraContainer.style.borderRadius = "4px";
barraContainer.style.overflow = "hidden";

const progresso = document.createElement("div");
progresso.id = "contador-progresso";
progresso.style.height = "100%";
progresso.style.width = "0%";
progresso.style.background = "green";
progresso.style.transition = "width 0.2s ease, background 0.3s ease";

// Montar hierarquia
barraContainer.appendChild(progresso);
wrapper.appendChild(texto);
wrapper.appendChild(barraContainer);

// Inserir logo após o campo
campo.parentNode.appendChild(wrapper);
// ———————————————————–

function atualizarContador() {
let usado = campo.value.length;
let restante = limite – usado;

// Impedir ultrapassar limite
if (usado > limite) {
campo.value = campo.value.substring(0, limite);
usado = limite;
restante = 0;
}

texto.textContent = `${usado} / ${limite} caracteres`;

// Porcentagem da barra
let pct = (usado / limite) * 100;
progresso.style.width = pct + "%";

// Mudar cor
if (pct < 60) {
progresso.style.background = "green";
} else if (pct < 85) {
progresso.style.background = "gold";
} else {
progresso.style.background = "red";
}
}

campo.addEventListener("input", atualizarContador);
atualizarContador(); // inicial
});