He creado una librería de componentes UI (HTML/CSS/JS puro) con estilo Dark Mode y los estoy compartiendo gratis.

Leho14

Leho14

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¡Hola a todos! 👋
Últimamente estaba cansado de tener que instalar librerías pesadas solo para tener un buen botón animado, un menú responsivo o un buen login en Dark Mode. Así que decidí programarlos desde cero usando solo HTML, CSS y JS puro
 

Adjuntos

  • 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: 10
  • 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: 9
Es interesante que lo hayas hecho a mano todo, incluso el responsive. Lo único que le veo es que una persona que entre a tu web para descargar los códigos puede mal entender como que lo has generado con IA simplemente por el uso de los colores (morado, tonos oscuros, ect).

Por lo demás felicitaciones porque se ve que de verdad le estas poniendo ganas.

¡Buena suerte!
 
Está interesante el proyecto y me ha dado curiosidad probar alguno de los componentes

¿Cómo se descargan exactamente los gratuitos?
He visto el botón de “Desbloquear código”, pero quería saber si hay que registrarse, pasar por alguna página o hacer algún paso antes de poder descargar el ZIP y ver el código.

Me ha llamado la atención una cosa.
Mientras estaba mirando la web me han aparecido estos 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”

Al principio pensé que eran compras reales en tiempo real, pero mirando el código he visto el [B]SCRIPT FOMO[/B] y que ahí hay una lista fija de nombres:
["Carlos M.", "David R.", "Ana P.", "Juan C.", "Elena S.", "Mateo T.", "Sofía L."]

Por lo que entiendo, el script va escogiendo aleatoriamente un nombre y un producto y muestra que “acaba de comprar”, aunque realmente no haya ocurrido esa compra.

Porque si son compras simuladas, quizá estaría bien indicarlo de alguna forma.
Tal como aparece ahora parece que son clientes reales comprando en ese momento y puede resultar un poco engañoso.


Insertar CODE, HTML o 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);
    });
 
Está interesante el proyecto y me ha dado curiosidad probar alguno de los componentes

¿Cómo se descargan exactamente los gratuitos?
He visto el botón de “Desbloquear código”, pero quería saber si hay que registrarse, pasar por alguna página o hacer algún paso antes de poder descargar el ZIP y ver el código.

Me ha llamado la atención una cosa.
Mientras estaba mirando la web me han aparecido estos avisos:


Al principio pensé que eran compras reales en tiempo real, pero mirando el código he visto el [B]SCRIPT FOMO[/B] y que ahí hay una lista fija de nombres:


Por lo que entiendo, el script va escogiendo aleatoriamente un nombre y un producto y muestra que “acaba de comprar”, aunque realmente no haya ocurrido esa compra.

Porque si son compras simuladas, quizá estaría bien indicarlo de alguna forma.
Tal como aparece ahora parece que son clientes reales comprando en ese momento y puede resultar un poco engañoso.


Insertar CODE, HTML o 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 hay algunas cosas que mejorar o cosas que no parecen bien o éticas del todo.

Yo quise resaltar que por lo menos lo hizo sin IA y es de aplaudir realmente, es un esfuerzo que casi nadie hace hoy en dia. Incluso ese pequeño script se ve que lo escribió él.
 
Está interesante el proyecto y me ha dado curiosidad probar alguno de los componentes

¿Cómo se descargan exactamente los gratuitos?
He visto el botón de “Desbloquear código”, pero quería saber si hay que registrarse, pasar por alguna página o hacer algún paso antes de poder descargar el ZIP y ver el código.

Me ha llamado la atención una cosa.
Mientras estaba mirando la web me han aparecido estos avisos:


Al principio pensé que eran compras reales en tiempo real, pero mirando el código he visto el [B]SCRIPT FOMO[/B] y que ahí hay una lista fija de nombres:


Por lo que entiendo, el script va escogiendo aleatoriamente un nombre y un producto y muestra que “acaba de comprar”, aunque realmente no haya ocurrido esa compra.

Porque si son compras simuladas, quizá estaría bien indicarlo de alguna forma.
Tal como aparece ahora parece que son clientes reales comprando en ese momento y puede resultar un poco engañoso.


Insertar CODE, HTML o 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);
    });
Los archivos están en zip se descargan en automático solo das desbloquear
 
Los archivos están en zip se descargan en automático solo das desbloquear
Gracias, ya he podido descargar algunos y he estado probándolos
He probado por ejemplo el generador QR y la galería con filtros.
El QR funciona bien, aunque para generar el código utiliza la librería externa qrcode.js, que tampoco tiene nada de malo.

En la galería sí he encontrado un pequeño fallo.
Si vas cambiando entre “Todos”, “Código”, “Setups”, etc., dependiendo del orden en que pulses los filtros, algunas imágenes terminan quedándose en posiciones raras y aparecen huecos enormes en la cuadrícula.

Mirando el código creo que viene de que al volver a mostrar las imágenes se les añade position: relative mediante un estilo inline, mientras que la clase .oculto intenta aplicar position: absolute.

Al final ese estilo inline se queda puesto y el comportamiento cambia según los filtros que hayas pulsado antes.
Te lo comento por si quieres revisarlo.
Al ser una librería que estás empezando y encima compartes componentes gratis, supongo que este tipo de fallos te vendrá bien que te los vayamos diciendo


0qcv4Y4.png


f4nI466.png
 
Realmente hay algunas cosas que mejorar o cosas que no parecen bien o éticas del todo.

Yo quise resaltar que por lo menos lo hizo sin IA y es de aplaudir realmente, es un esfuerzo que casi nadie hace hoy en dia. Incluso ese pequeño script se ve que lo escribió él.
Me ha dado curiosidad esto que comentas , ¿Cómo puedes saber viendo ese script que lo ha escrito una persona y que no ha usado IA?

Lo pregunto en serio, porque yo viendo código puedo fijarme en cómo está estructurado, los comentarios, nombres de variables, errores, etc., pero no sabría afirmar quién lo ha escrito ni si ha utilizado IA como apoyo que no es nada de malo usarla, para eso está.

¿Hay alguna característica concreta del código por la que tú puedas distinguirlo?
Me interesa saberlo porque yo no sería capaz de asegurarlo solo viéndolo
 
Última edición:
Me ha dado curiosidad esto que comentas , ¿Cómo puedes saber viendo ese script que lo ha escrito una persona y que no ha usado IA?

Lo pregunto en serio, porque yo viendo código puedo fijarme en cómo está estructurado, los comentarios, nombres de variables, errores, etc., pero no sabría afirmar quién lo ha escrito ni si ha utilizado IA como apoyo que no es nada de malo usarla, para eso está.

¿Hay alguna característica concreta del código por la que tú puedas distinguirlo?
Me interesa saberlo porque yo no sería capaz de asegurarlo solo viéndolo
Simplemente el código es más elaborado, mejor estructurado y con muchos comentarios donde le habla a la persona que lo generó.
 
Simplemente el código es más elaborado, mejor estructurado y con muchos comentarios donde le habla a la persona que lo generó.
Entiendo lo que dices, pero sigo sin ver cómo esos detalles permiten saber que no se ha usado IA.
Precisamente una IA también puede generar código elaborado, bien estructurado y con muchos comentarios explicando cada parte.

¿Te refieres simplemente a que por tu experiencia te da la impresión de que está escrito a mano, o hay algo concreto en el código que una IA normalmente no haría?
Lo pregunto por curiosidad, porque esos mismos criterios yo los he visto también en código generado con IA.
 
Entiendo lo que dices, pero sigo sin ver cómo esos detalles permiten saber que no se ha usado IA.
Precisamente una IA también puede generar código elaborado, bien estructurado y con muchos comentarios explicando cada parte.

¿Te refieres simplemente a que por tu experiencia te da la impresión de que está escrito a mano, o hay algo concreto en el código que una IA normalmente no haría?
Lo pregunto por curiosidad, porque esos mismos criterios yo los he visto también en código generado con IA.
Si, es por experiencia que lo digo. Antes de la IA cuando escribia código pues era muy "humano" todo: variables con nombres explicitos que se explicaban solas con leerlas, comentarios donde explicaba algo para otras personas (solo si era muy necesario), patrones de arquitectura muy convencionales para saber donde ubiqué cada cosa, ect...

Un agente de IA le puedes pedir lo mismo varias veces y llega a usar diferentes arquitecturas para implementarlo, un humano se repite en su forma de trabajar. Tampoco deja comentarios explicandose a si mismo las cosas, como si fuera hablandose a él mismo.

Ciertamente un agente puede seguir tu "forma de trabajar" pero nunca la sigue al 100% sin varios prompts.
 
Si, es por experiencia que lo digo. Antes de la IA cuando escribia código pues era muy "humano" todo: variables con nombres explicitos que se explicaban solas con leerlas, comentarios donde explicaba algo para otras personas (solo si era muy necesario), patrones de arquitectura muy convencionales para saber donde ubiqué cada cosa, ect...

Un agente de IA le puedes pedir lo mismo varias veces y llega a usar diferentes arquitecturas para implementarlo, un humano se repite en su forma de trabajar. Tampoco deja comentarios explicandose a si mismo las cosas, como si fuera hablandose a él mismo.

Ciertamente un agente puede seguir tu "forma de trabajar" pero nunca la sigue al 100% sin varios prompts.
Ahora entiendo mejor lo que quieres decir con lo de la experiencia y la forma de programar de cada persona.
Sí veo que esos patrones pueden servir para hacerte una idea de si un código parece escrito a mano o generado con IA.

Lo que sigo sin entender del todo es cómo puedes tener tanta seguridad en este caso concreto.
En tu primer mensaje le dijiste directamente: “Es interesante que lo hayas hecho a mano todo, incluso el responsive”, como si supieras que realmente todo lo había hecho él sin IA.

Y ahora comentas que una de las cosas en las que te fijas es que un humano suele repetir su forma de trabajar, arquitectura, nombres de variables, etc.
Pero para reconocer que esa es su forma habitual de programar, ¿no tendrías que haber visto anteriormente más código suyo para poder compararlo?

Porque si es la primera vez que ves su código, entiendo perfectamente que por experiencia puedas decir “a mí esto me parece escrito por una persona”, pero no veo cómo se puede pasar de esa impresión a saber que “lo ha hecho a mano todo”.

Te lo pregunto de verdad por curiosidad, no por llevarte la contraria.
Si puedes poner algún ejemplo concreto de su código donde hayas visto ese patrón que comentas, me interesa verlo porque quizá así entiendo mejor a qué te refieres.
 
Ahora entiendo mejor lo que quieres decir con lo de la experiencia y la forma de programar de cada persona.
Sí veo que esos patrones pueden servir para hacerte una idea de si un código parece escrito a mano o generado con IA.

Lo que sigo sin entender del todo es cómo puedes tener tanta seguridad en este caso concreto.
En tu primer mensaje le dijiste directamente: “Es interesante que lo hayas hecho a mano todo, incluso el responsive”, como si supieras que realmente todo lo había hecho él sin IA.

Y ahora comentas que una de las cosas en las que te fijas es que un humano suele repetir su forma de trabajar, arquitectura, nombres de variables, etc.
Pero para reconocer que esa es su forma habitual de programar, ¿no tendrías que haber visto anteriormente más código suyo para poder compararlo?

Porque si es la primera vez que ves su código, entiendo perfectamente que por experiencia puedas decir “a mí esto me parece escrito por una persona”, pero no veo cómo se puede pasar de esa impresión a saber que “lo ha hecho a mano todo”.

Te lo pregunto de verdad por curiosidad, no por llevarte la contraria.
Si puedes poner algún ejemplo concreto de su código donde hayas visto ese patrón que comentas, me interesa verlo porque quizá así entiendo mejor a qué te refieres.
Realmente no lo miré mucho el código porque fácilmente notas cuando es IA o no.

Por ejemplo:

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;
}

¿Ves el comentario en el margen?, este comentario me dice a mi que él luchó para conseguir que se centrara la caja. Si le pides a una IA que te lo corrija, ahi no dejaría un comentario, más bien en la respuesta te dice porque lo hizo así, aunque el código sea el mismo.

Este tipo de comentarios lo he visto mucho repetido con cientos de programadores que van empezando. Dejan guías donde se pelearon con la tecnología que estan usando.

Es cierto que dije que él lo hizo a mano, puede que haya usado IA para algunas cosas, pero a simple vista no lo noto.
 
Atrás
Arriba