Fins ara, la LAN Party utilitzava un Google Forms extern per a les inscripcions. Tot i ser funcional, presentava mancances en la integració visual i en l’experiència d’usuari (UX). Per a una millor integració, s’ha decidit migrar aquest formulari a un entorn programat en HTML5, CSS3 i JavaScript, integrat directament al servidor Nginx de la LAN.
Per a la creació del codi, s’ha utilitzat assistència d’IA generativa seguint aquesta seqüència de treball
Prompt 1
Genera una estructura de formulari HTML5 basada en el meu formulari de Google existent. Necessito que inclogui camps de text, correu, selecció de dispositiu i checkboxes per a la normativa legal (RGPD) utilitzant el mètode POST per seguretat

Prompt 2
Crea un fitxer CSS que repliqui l'estil 'Material Design' de Google Forms, però adaptat als colors de la nostra LAN Party. Utilitza un disseny de targetes (cards) sobre un fons gris clar i assegura't que sigui responsive.

Prompt 3
Afegeix una capa de JavaScript per validar que els usuaris menors de 18 anys rebin un avís sobre l'autorització paterna en el moment d'introduir l'edat, i que el botó d'enviament mostri una confirmació sense recarregar la pàgina.

Evidències
Aquest és el formulari original en el qual ens hem basat per fer la versió en codi.

Aquest és part del codi oberta a VS Code, per fer la previsualització.

Aquest és el formulari funcionant correctament

En aquesta imatge es pot veure l’apartat de l’edat, i en cas que siguis menor d’edat et recordarà que has de portar l’autorització.


Deixa un comentari