Criei uma biblioteca de componentes UI (HTML/CSS/JS puro) com estilo Dark Mode e estou compartilhando de graça

  • Autor Autor Leho14
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
Leho14

Leho14

Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Olá a todos! 👋
Ultimamente estava cansado de ter que instalar bibliotecas pesadas só para ter um bom botão animado, um menu responsivo ou um bom login em Dark Mode. Então decidi programá-los do zero usando apenas HTML, CSS e JS puro
 

Anexos

  • Screenshot_2026-10-08-09-26-08-935_com.android.chrome.webp
    Screenshot_2026-10-08-09-26-08-935_com.android.chrome.webp
    66 KB · Visitas: 28
  • Screenshot_2026-10-08-09-26-00-318_com.android.chrome.webp
    Screenshot_2026-10-08-09-26-00-318_com.android.chrome.webp
    112,4 KB · Visitas: 24
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
É interessante que você tenha feito tudo à mão, inclusive o responsivo. A única coisa que vejo é que uma pessoa que entre no seu site para baixar os códigos pode entender mal, achando que você gerou com IA simplesmente pelo uso das cores (roxo, tons escuros, etc.).

No mais, parabéns, porque dá para ver que você realmente está se dedicando.

Boa sorte!
 
O projeto é interessante e fiquei curioso para testar algum dos componentes

Como se baixam exatamente os gratuitos?
Vi o botão de “Desbloquear código”, mas queria saber se é preciso se registrar, passar por alguma página ou fazer algum passo antes de poder baixar o ZIP e ver o código.

Uma coisa me chamou a atenção.
Enquanto eu estava olhando o site, apareceram estes avisos:
“Sofía L. acaba de comprar App Radio Online PWA”
“Carlos M. acaba de comprar Dashboard Admin Pro”
“Elena S. acaba de comprar App Radio Online PWA”

No início pensei que fossem compras reais em tempo real, mas olhando o código vi o [B]SCRIPT FOMO[/B] e que ali tem uma lista fixa de nomes:
["Carlos M.", "David R.", "Ana P.", "Juan C.", "Elena S.", "Mateo T.", "Sofía L."]

Pelo que entendo, o script vai escolhendo aleatoriamente um nome e um produto e mostra que “acaba de comprar”, embora realmente essa compra não tenha ocorrido.

Porque se são compras simuladas, talvez fosse bom indicar isso de alguma forma.
Do jeito que aparece agora, parece que são clientes reais comprando naquele momento e pode ser um pouco enganoso.


Inserir CODE, HTML ou PHP:
// --- 4. SCRIPT FOMO ---
    document.addEventListener('DOMContentLoaded', function() {
        const fomoAlerta = document.getElementById('fomo-alerta');
        const fomoMensaje = document.getElementById('fomo-mensaje');
        const fomoTiempo = document.getElementById('fomo-tiempo');

        const nombres = ["Carlos M.", "David R.", "Ana P.", "Juan C.", "Elena S.", "Mateo T.", "Sofía L."];
        const productos = ["PuzzleStudio Pro VIP 💎", "App Radio Online PWA 📻", "Dashboard Admin Pro 📊", "Hero Section Animado ✨"];
        
        function mostrarFOMO() {
            const nombre = nombres[Math.floor(Math.random() * nombres.length)];
            const producto = productos[Math.floor(Math.random() * productos.length)];
            const tiempo = Math.floor(Math.random() * 5) + 1;

            fomoMensaje.innerHTML = `<strong>${nombre}</strong> acaba de comprar <br><span style="color: #58a6ff;">${producto}</span>`;
            fomoTiempo.innerText = `Hace ${tiempo} min`;
            fomoAlerta.classList.add('mostrar');

            setTimeout(() => { fomoAlerta.classList.remove('mostrar'); }, 6000);
        }

        setTimeout(() => {
            mostrarFOMO();
            setInterval(mostrarFOMO, 180000);
        }, 15000);
    });
 
O projeto é interessante e fiquei curioso para testar algum dos componentes

Como se baixam exatamente os gratuitos?
Vi o botão de “Desbloquear código”, mas queria saber se é preciso se registrar, passar por alguma página ou fazer algum passo antes de poder baixar o ZIP e ver o código.

Uma coisa me chamou a atenção.
Enquanto eu estava olhando o site, apareceram estes avisos:


Ao princípio pensei que fossem compras reais em tempo real, mas olhando o código vi o [B]SCRIPT FOMO[/B] e que ali tem uma lista fixa de nomes:


Pelo que entendo, o script vai escolhendo aleatoriamente um nome e um produto e mostra que “acaba de comprar”, embora realmente essa compra não tenha ocorrido.

Porque se são compras simuladas, talvez fosse bom indicar isso de alguma forma.
Do jeito que aparece agora, parece que são clientes reais comprando naquele momento e pode ser um pouco enganoso.


Inserir CODE, HTML ou PHP:
// --- 4. SCRIPT FOMO ---
    document.addEventListener('DOMContentLoaded', function() {
        const fomoAlerta = document.getElementById('fomo-alerta');
        const fomoMensaje = document.getElementById('fomo-mensaje');
        const fomoTiempo = document.getElementById('fomo-tiempo');

        const nombres = ["Carlos M.", "David R.", "Ana P.", "Juan C.", "Elena S.", "Mateo T.", "Sofía L."];
        const productos = ["PuzzleStudio Pro VIP 💎", "App Radio Online PWA 📻", "Dashboard Admin Pro 📊", "Hero Section Animado ✨"];
       
        function mostrarFOMO() {
            const nombre = nombres[Math.floor(Math.random() * nombres.length)];
            const producto = productos[Math.floor(Math.random() * productos.length)];
            const tiempo = Math.floor(Math.random() * 5) + 1;

            fomoMensaje.innerHTML = `<strong>${nombre}</strong> acaba de comprar <br><span style="color: #58a6ff;">${producto}</span>`;
            fomoTiempo.innerText = `Hace ${tiempo} min`;
            fomoAlerta.classList.add('mostrar');

            setTimeout(() => { fomoAlerta.classList.remove('mostrar'); }, 6000);
        }

        setTimeout(() => {
            mostrarFOMO();
            setInterval(mostrarFOMO, 180000);
        }, 15000);
    });
Realmente há algumas coisas para melhorar ou coisas que não parecem bem ou totalmente éticas.

Eu quis ressaltar que, pelo menos, ele fez sem IA e é algo a se aplaudir realmente, é um esforço que quase ninguém faz hoje em dia. Inclusive esse pequeno script dá para ver que foi ele quem escreveu.
 
O projeto é interessante e fiquei curioso para testar alguns dos componentes

Como exatamente se faz o download dos gratuitos?
Vi o botão de “Desbloquear código”, mas queria saber se é preciso se registrar, passar por alguma página ou fazer algum passo antes de poder baixar o ZIP e ver o código.

Uma coisa me chamou a atenção.
Enquanto eu estava olhando o site, apareceram estes avisos:


No início pensei que fossem compras reais em tempo real, mas olhando o código vi o [B]SCRIPT FOMO[/B] e que ali tem uma lista fixa de nomes:


Pelo que entendi, o script vai escolhendo aleatoriamente um nome e um produto e mostra que “acabou de comprar”, embora essa compra não tenha realmente ocorrido.

Porque se são compras simuladas, talvez fosse bom indicar isso de alguma forma.
Do jeito que aparece agora, parece que são clientes reais comprando naquele momento e pode ser um pouco enganoso.


Inserir CODE, HTML ou PHP:
// --- 4. SCRIPT FOMO ---
    document.addEventListener('DOMContentLoaded', function() {
        const fomoAlerta = document.getElementById('fomo-alerta');
        const fomoMensaje = document.getElementById('fomo-mensaje');
        const fomoTiempo = document.getElementById('fomo-tiempo');

        const nombres = ["Carlos M.", "David R.", "Ana P.", "Juan C.", "Elena S.", "Mateo T.", "Sofía L."];
        const productos = ["PuzzleStudio Pro VIP 💎", "App Radio Online PWA 📻", "Dashboard Admin Pro 📊", "Hero Section Animado ✨"];
       
        function mostrarFOMO() {
            const nombre = nombres[Math.floor(Math.random() * nombres.length)];
            const producto = productos[Math.floor(Math.random() * productos.length)];
            const tiempo = Math.floor(Math.random() * 5) + 1;

            fomoMensaje.innerHTML = `<strong>${nombre}</strong> acaba de comprar <br><span style="color: #58a6ff;">${producto}</span>`;
            fomoTiempo.innerText = `Hace ${tiempo} min`;
            fomoAlerta.classList.add('mostrar');

            setTimeout(() => { fomoAlerta.classList.remove('mostrar'); }, 6000);
        }

        setTimeout(() => {
            mostrarFOMO();
            setInterval(mostrarFOMO, 180000);
        }, 15000);
    });
Os arquivos estão em zip, são baixados automaticamente, é só clicar em desbloquear
 
Os arquivos estão em zip, são baixados automaticamente, é só clicar em desbloquear
Obrigado, já consegui baixar alguns e estive testando eles
Testei, por exemplo, o gerador de QR e a galeria com filtros.
O QR funciona bem, embora para gerar o código utilize a biblioteca externa qrcode.js, o que também não tem nada de errado.

Na galeria, sim, encontrei uma pequena falha.
Se você vai alternando entre “Todos”, “Código”, “Setups”, etc., dependendo da ordem em que clica nos filtros, algumas imagens acabam ficando em posições estranhas e aparecem espaços enormes na grade.

Olhando o código, acho que vem do fato de que, ao voltar a mostrar as imagens, é adicionado a elas position: relative através de um estilo inline, enquanto a classe .oculto tenta aplicar position: absolute.

No final, esse estilo inline fica aplicado e o comportamento muda conforme os filtros que você tenha clicado antes.
Comento isso caso você queira revisar.
Por ser uma biblioteca que você está começando e, além disso, compartilha componentes grátis, suponho que esse tipo de falha seja bom que a gente vá te avisando


0qcv4Y4.png


f4nI466.png
 
Realmente há algumas coisas para melhorar ou coisas que não parecem bem ou totalmente éticas.

Eu quis ressaltar que, pelo menos, ele fez sem IA e é algo a se aplaudir realmente, é um esforço que quase ninguém faz hoje em dia. Inclusive, dá para ver que aquele pequeno script foi ele quem escreveu.
Fiquei curioso com isso que você comenta, como você consegue saber, vendo esse script, que foi uma pessoa que escreveu e que não usou IA?

Pergunto seriamente, porque eu, vendo código, posso prestar atenção em como está estruturado, nos comentários, nomes de variáveis, erros, etc., mas não saberia afirmar quem o escreveu nem se utilizou IA como apoio, o que não tem nada de errado em usar, para isso ela serve.

Existe alguma característica concreta do código pela qual você consiga distinguir?
Me interessa saber porque eu não seria capaz de garantir só olhando
 
Última edição:
Fiquei curioso com isso que você comenta, como você consegue saber, vendo esse script, que foi uma pessoa que escreveu e que não usou IA?

Pergunto seriamente, porque eu, vendo código, posso prestar atenção em como está estruturado, nos comentários, nomes de variáveis, erros, etc., mas não saberia afirmar quem o escreveu nem se utilizou IA como apoio, o que não tem nada de errado em usar, para isso ela serve.

Existe alguma característica concreta do código pela qual você consiga distinguir?
Me interessa saber porque eu não seria capaz de garantir só olhando
Simplesmente o código é mais elaborado, melhor estruturado e com muitos comentários onde ele fala com a pessoa que o gerou.
 
Simplesmente o código é mais elaborado, melhor estruturado e com muitos comentários onde ele fala com a pessoa que o gerou.
Entendo o que você diz, mas continuo sem ver como esses detalhes permitem saber que não foi usada IA.
Precisamente, uma IA também pode gerar código elaborado, bem estruturado e com muitos comentários explicando cada parte.

Você se refere simplesmente a que, pela sua experiência, te dá a impressão de que está escrito à mão, ou há algo concreto no código que uma IA normalmente não faria?
Pergunto por curiosidade, porque esses mesmos critérios eu já vi também em código gerado com IA.
 
Entendo o que você diz, mas continuo sem ver como esses detalhes permitem saber que não foi usada IA.
Precisamente uma IA também pode gerar código elaborado, bem estruturado e com muitos comentários explicando cada parte.

Você se refere simplesmente a que, pela sua experiência, te dá a impressão de que está escrito à mão, ou há algo concreto no código que uma IA normalmente não faria?
Pergunto por curiosidade, porque esses mesmos critérios eu já vi também em código gerado com IA.
Sim, é por experiência que digo isso. Antes da IA, quando eu escrevia código, era tudo muito "humano": variáveis com nomes explícitos que se explicavam sozinhas ao ler, comentários onde eu explicava algo para outras pessoas (apenas se fosse muito necessário), padrões de arquitetura muito convencionais para saber onde coloquei cada coisa, etc...

Um agente de IA você pode pedir a mesma coisa várias vezes e ele chega a usar diferentes arquiteturas para implementar, um humano se repete na sua forma de trabalhar. Tampouco deixa comentários explicando as coisas para si mesmo, como se estivesse falando sozinho.

Certamente um agente pode seguir sua "forma de trabalhar", mas nunca a segue 100% sem vários prompts.
 
Sim, é por experiência que digo isso. Antes da IA, quando eu escrevia código, era tudo muito "humano": variáveis com nomes explícitos que se explicavam sozinhas ao ler, comentários onde eu explicava algo para outras pessoas (apenas se fosse muito necessário), padrões de arquitetura muito convencionais para saber onde coloquei cada coisa, etc...

Um agente de IA você pode pedir a mesma coisa várias vezes e ele chega a usar diferentes arquiteturas para implementar, um humano se repete na sua forma de trabalhar. Tampouco deixa comentários explicando as coisas para si mesmo, como se estivesse falando sozinho.

Certamente um agente pode seguir sua "forma de trabalhar", mas nunca a segue 100% sem vários prompts.
Agora entendo melhor o que você quer dizer com a questão da experiência e a forma de programar de cada pessoa.
Sim, vejo que esses padrões podem servir para ter uma ideia se um código parece escrito à mão ou gerado com IA.

O que continuo sem entender totalmente é como você pode ter tanta segurança neste caso concreto.
Na sua primeira mensagem você disse diretamente: “É interessante que você tenha feito tudo à mão, inclusive o responsive”, como se soubesse que realmente tudo tinha sido feito por ele sem IA.

E agora você comenta que uma das coisas nas quais você se fixa é que um humano costuma repetir sua forma de trabalhar, arquitetura, nomes de variáveis, etc.
Mas para reconhecer que essa é a sua forma habitual de programar, você não teria que ter visto anteriormente mais código dele para poder comparar?

Porque se é a primeira vez que você vê o código dele, entendo perfeitamente que por experiência você possa dizer “para mim isso parece escrito por uma pessoa”, mas não vejo como se pode passar dessa impressão para saber que “ele fez tudo à mão”.

Te pergunto de verdade por curiosidade, não para te contrariar.
Se você puder colocar algum exemplo concreto do código dele onde você viu esse padrão que comenta, me interessa ver porque talvez assim eu entenda melhor ao que você se refere.
 
Agora entendo melhor o que você quer dizer com a questão da experiência e a forma de programar de cada pessoa.
Sim, vejo que esses padrões podem servir para ter uma ideia se um código parece escrito à mão ou gerado com IA.

O que continuo sem entender totalmente é como você pode ter tanta segurança neste caso concreto.
Na sua primeira mensagem você disse diretamente: “É interessante que você tenha feito tudo à mão, inclusive o responsive”, como se soubesse que realmente tudo tinha sido feito por ele sem IA.

E agora você comenta que uma das coisas nas quais você se fixa é que um humano costuma repetir sua forma de trabalhar, arquitetura, nomes de variáveis, etc.
Mas para reconhecer que essa é a sua forma habitual de programar, você não teria que ter visto anteriormente mais código dele para poder comparar?

Porque se é a primeira vez que você vê o código dele, entendo perfeitamente que por experiência você possa dizer “para mim isso parece escrito por uma pessoa”, mas não vejo como se pode passar dessa impressão para saber que “ele fez tudo à mão”.

Te pergunto de verdade por curiosidade, não para te contrariar.
Se você puder colocar algum exemplo concreto do código dele onde você viu esse padrão que comenta, me interessa ver porque talvez assim eu entenda melhor ao que você se refere.
Realmente não olhei muito o código porque facilmente você nota quando é IA ou não.

Por exemplo:

CSS:
.caja-instrucciones {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(30, 215, 96, 0.08), rgba(0, 212, 255, 0.05));
  border: 1px solid rgba(30, 215, 96, 0.3);
  border-radius: 15px;
  padding: 20px 25px;
  max-width: 800px;
  margin: 40px auto 20px auto; /* Centra la caja automáticamente */
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: flotar 4s ease-in-out infinite;
}

Você vê o comentário na margem? Este comentário me diz que ele lutou para conseguir centralizar a caixa. Se você pedir a uma IA que corrija, ela não deixaria um comentário ali; na resposta, ela te diria por que fez assim, mesmo que o código seja o mesmo.

Esse tipo de comentário eu vi muito repetido com centenas de programadores que estão começando. Eles deixam guias de onde tiveram dificuldades com a tecnologia que estão usando.

É verdade que eu disse que ele fez à mão, pode ser que tenha usado IA para algumas coisas, mas a olho nu não percebo.
 
Realmente não olhei muito o código porque facilmente você nota quando é IA ou não.

Por exemplo:

CSS:
.caja-instrucciones {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(30, 215, 96, 0.08), rgba(0, 212, 255, 0.05));
  border: 1px solid rgba(30, 215, 96, 0.3);
  border-radius: 15px;
  padding: 20px 25px;
  max-width: 800px;
  margin: 40px auto 20px auto; /* Centra la caja automáticamente */
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: flotar 4s ease-in-out infinite;
}

Você vê o comentário na margem? Este comentário me diz que ele lutou para conseguir centralizar a caixa. Se você pedir a uma IA para corrigir, ela não deixaria um comentário ali, na verdade, na resposta ela te diz por que fez assim, embora o código seja o mesmo.

Este tipo de comentário eu vi muito repetido com centenas de programadores que estão começando. Eles deixam guias onde brigaram com a tecnologia que estão usando.

É verdade que eu disse que ele fez à mão, pode ser que tenha usado IA para algumas coisas, mas a olho nu não noto.
Agora sim entendo melhor ao que você se referia, com o exemplo fica bem mais claro.

Entendo que, pela sua experiência, esse tipo de comentário te lembra coisas que costumam deixar programadores quando estão aprendendo ou quando tiveram que brigar com algo para conseguir que funcione.

O único ponto é que eu continuo vendo isso mais como um indício ou uma impressão do que como uma forma de saber se foi usada IA.
Por exemplo, /* Centra a caixa automaticamente */ também poderia ser gerado perfeitamente por uma IA se você pedir o código comentado, e vendo apenas esse comentário não podemos saber realmente por que acabou ali.

Mas com o último que você diz, já te entendo melhor: você não afirma que pode saber com certeza que não utilizou IA, mas que pelo que viu e pela sua experiência não te deu essa impressão.

Obrigado por colocar o exemplo, era exatamente o que eu queria entender
 
Boa contribuição. Como designer, o que mais valorizo nessas bibliotecas é a consistência: que os botões, inputs e cartões pareçam da mesma família sem brigar com CSS toda vez. O dark mode bem feito não é apenas inverter cores, é cuidar dos contrastes para que o texto seja lido de forma confortável. Você tem planejado adicionar variantes de tamanho ou estados (hover, disabled)? Isso o tornaria utilizável em projetos reais.
 
Sinceramente, o site e os componentes parecem feitos com IA sem nenhum tipo de critério ou revisão. E o pior não é que estejam feitos com IA, mas a péssima qualidade do resultado.

Além disso, você se atreve a cobrar por versões premium de algo que qualquer modelo de IA chinês medíocre pode gerar muito melhor.

E chamá-lo de biblioteca de componentes UI é bastante generoso, porque são simplesmente componentes aleatórios sem coerência nem consistência visual entre eles.

Não entendo que sentido tem vir ao fórum promover algo tão pouco trabalhado como se fosse um produto premium.
 
Voltar
Topo