Skip to content

Commit

Permalink
close registration form
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgeteixe
jorgeteixe committed Feb 7, 2024
1 parent 2d01eaf commit bb682ba
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 322 deletions.
6 changes: 3 additions & 3 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ import jorgeImage from '~/assets/images/jorge.jpeg';
actions={[
{
variant: 'primary',
text: 'Regístrate',
href: getPermalink('/registro'),
icon: 'tabler:user-scan',
text: 'Información',
href: getPermalink('/informacion'),
icon: 'tabler:info-circle',
},
{ text: 'Saber más', href: '#que-es' },
]}
Expand Down
321 changes: 2 additions & 319 deletions src/pages/registro.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,327 +19,10 @@ const metadata = {
subtitle="Las plazas son limitadas, te avisaremos cuando seas aceptado en el hackathon."
/>

<div class="max-w-xl mx-auto mb-5 -mt-5 text-center p-5 rounded-md bg-orange-100 shadow-sm">
<p>Actualmente, la lista de participantes está llena, pero aún puedes registrarte para entrar en lista de espera. Si algún participante cancela su asistencia, seleccionaremos personas de la lista de espera.</p>
<div class="max-w-xl mx-auto mb-72 -mt-5 text-center p-5 rounded-md bg-orange-100 shadow-sm">
<p>¡El registro está cerrado!</p>
</div>

<div class="max-w-xl mx-auto mb-10 text-center p-5 rounded-md bg-blue-100 shadow-sm">
<p>Si tus compañeros de equipo ya están confirmados y solo tú faltas por registrarte, por favor, regístrate y notifícanos por correo electrónico a <a href="mailto:[email protected]" class="text-blue-700 underline">[email protected]</a> o a través del <a href="/contacto" class="text-blue-700 underline">formulario de contacto</a>.</p>
</div>

<div class="flex flex-col mb-10 max-w-xl mx-auto rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-4 py-2 sm:px-6 lg:px-8 lg:py-4 w-full">
<div class="mb-2">
<form id="form">
<label for="name" class="block text-sm font-medium my-1 mt-4 relative">
Nombre completo <small class="text-red-500 pl-1">*</small>
</label>
<input
type="text"
name="name"
id="name"
autocomplete="off"
placeholder="Linus Torvalds"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="email" class="block text-sm font-medium my-1 mt-4">
Email <small class="text-red-500 pl-1">*</small>
</label>
<input
type="email"
name="email"
id="email"
autocomplete="off"
placeholder="[email protected]"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="phone" class="block text-sm font-medium my-1 mt-4">
Número de teléfono <small class="text-red-500 pl-1">*</small>
<span class="ml-2 text-gray-500 hover:text-gray-700 cursor-help group relative text-small">
<Icon name="tabler:help" class="w-4 h-4 mb-1 inline" />
<span class="absolute w-64 bg-gray-800 text-white text-xs rounded-lg py-2 px-3 -mt-12 ml-16 hidden group-hover:block">
Contacto en caso de urgencia.
</span>
</span>
</label>
<input
type="text"
name="phone"
id="phone"
autocomplete="off"
placeholder="881 011 964"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="age" class="block text-sm font-medium my-1 mt-4">
Edad <small class="text-red-500 pl-1">*</small>
</label>
<input
type="number"
name="age"
id="age"
autocomplete="off"
placeholder="53"
min="18"
step="1"
max="50"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="studyLevel" class="block text-sm font-medium my-1 mt-4">
Nivel de estudios en curso <small class="text-red-500 pl-1">*</small>
</label>
<select
id="studyLevel"
name="studyLevel"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="university">Universitarios</option>
<option value="fp">Formación profesional</option>
<option value="secondary">Secundaria</option>
<option value="other">Otros</option>
</select>
<label for="studyName" class="block text-sm font-medium my-1 mt-4 relative">
Nombre de los estudios <small class="text-red-500 pl-1">*</small>
</label>
<input
type="text"
name="studyName"
id="studyName"
autocomplete="off"
placeholder="Grado de Ciencia e Ingeniería de Datos"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="studyInstitution" class="block text-sm font-medium my-1 mt-4 relative">
Institución de los estudios <small class="text-red-500 pl-1">*</small>
</label>
<input
type="text"
name="studyInstitution"
id="studyInstitution"
autocomplete="off"
placeholder="UDC"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="year" class="block text-sm font-medium my-1 mt-4">
Curso <small class="text-red-500 pl-1">*</small>
</label>
<select
id="year"
name="year"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="first">1º</option>
<option value="second">2º</option>
<option value="third">3º</option>
<option value="fourth">4º</option>
<option value="notapplicable">No aplica</option>
</select>
<label for="city" class="block text-sm font-medium my-1 mt-4 relative">
Ciudad de residencia <small class="text-red-500 pl-1">*</small>
</label>
<input
type="text"
name="city"
id="city"
autocomplete="off"
placeholder="A Coruña"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<label for="genre" class="block text-sm font-medium my-1 mt-4">
Género <small class="text-red-500 pl-1">*</small>
<span class="ml-2 text-gray-500 hover:text-gray-700 cursor-help group relative text-small">
<Icon name="tabler:help" class="w-4 h-4 mb-1 inline" />
<span class="absolute w-64 bg-gray-800 text-white text-xs rounded-lg py-2 px-3 -mt-12 ml-16 hidden group-hover:block">
Requerido por la Xunta a nivel estadístico.
</span>
</span>
</label>
<select
id="genre"
name="genre"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="man">Hombre</option>
<option value="woman">Mujer</option>
<option value="nonbinary">No binario</option>
<option value="unspecified">Prefiero no decirlo</option>
<option value="other">Otro</option>
</select>
<label for="food" class="block text-sm font-medium my-1 mt-4">
Restricciones alimentarias <small class="text-red-500 pl-1">*</small>
<span class="ml-2 text-gray-500 hover:text-gray-700 cursor-help group relative text-small">
<Icon name="tabler:help" class="w-4 h-4 mb-1 inline" />
<span class="absolute w-64 bg-gray-800 text-white text-xs rounded-lg py-2 px-3 -mt-12 ml-16 hidden group-hover:block">
En caso de indicar "Otras", contactaremos contigo de manera individual para especificarlas.
</span>
</span>
</label>
<select
id="food"
name="food"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="nothing">Sin restricciones</option>
<option value="vegetarian">Vegetariano</option>
<option value="vegan">Vegano</option>
<option value="celiac">Sin gluten</option>
<option value="other">Otras</option>
</select>
<label for="ects" class="block text-sm font-medium my-1 mt-4">
Solicitar créditos ECTS <small class="text-red-500 pl-1">*</small>
<span class="ml-2 text-gray-500 hover:text-gray-700 cursor-help group relative text-small">
<Icon name="tabler:help" class="w-4 h-4 mb-1 inline" />
<span class="absolute w-64 bg-gray-800 text-white text-xs rounded-lg py-2 px-3 -mt-12 ml-16 hidden group-hover:block">
Estudiantes de la UDC podrán solicitar hasta 3 ECTS.
</span>
</span>
</label>
<select
id="ects"
name="ects"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="yes">Si, deseo solicitar los 3 ECTS.</option>
<option value="no">No.</option>
</select>
<label for="sleep" class="block text-sm font-medium my-1 mt-4">
¿Necesitas un lugar para dormir? <small class="text-red-500 pl-1">*</small>
<span class="ml-2 text-gray-500 hover:text-gray-700 cursor-help group relative text-small">
<Icon name="tabler:help" class="w-4 h-4 mb-1 inline" />
<span class="absolute w-64 bg-gray-800 text-white text-xs rounded-lg py-2 px-3 -mt-12 ml-16 hidden group-hover:block">
Durante el evento, puede que necesites descansar. Indica si tienes o no un sitio para dormir en Coruña.
</span>
</span>
</label>
<select
id="sleep"
name="sleep"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="yes">Si, necesito donde dormir.</option>
<option value="no">No, ya tengo donde dormir en Coruña.</option>
</select>
<label for="tshirt" class="block text-sm font-medium my-1 mt-4">
Talla de camiseta <small class="text-red-500 pl-1">*</small>
</label>
<select
id="tshirt"
name="tshirt"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
<option value=""></option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<label for="cv" class="block text-sm font-medium my-1 mt-4">
Currículum vitae (PDF) <small class="text-red-500 pl-1">*</small>
<span class="ml-2 text-gray-500 hover:text-gray-700 cursor-help group relative text-small">
<Icon name="tabler:help" class="w-4 h-4 mb-1 inline" />
<span class="absolute w-64 bg-gray-800 text-white text-xs rounded-lg py-2 px-3 -mt-12 ml-16 hidden group-hover:block">
En caso de tener más solicitudes que plazas, se utilizará para balancear el nivel de los participantes.
</span>
</span>
</label>
<input
type="file"
id="cv"
name="cv"
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 file:border-none file:text-white file:bg-gray-600 file:py-1 file:px-2 file:rounded-lg"
/>
<div class="block my-4">
<label for="sharecv" class="flex items-center">
<input
type="checkbox"
id="sharecv"
name="sharecv"
checked
class="text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<span class="ml-2 text-sm font-medium text-gray-700">Quiero compartir el CV con las empresas patrocinadoras.</span>
</label>
</div>
<hr>
<label for="why" class="block text-sm font-medium my-1 mt-4">
¿Por qué quieres participar en HackUDC? <small class="text-red-500 pl-1">*</small>
</label>
<textarea
name="why"
id="why"
rows="4"
placeholder="Escribe aquí tus motivos..."
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
/>
<div class="block my-4">
<label for="conduct" class="flex items-center">
<input
type="checkbox"
id="conduct"
name="conduct"
class="text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<span id="conductText" class="ml-2 text-sm font-medium text-gray-700">Acepto el <a href={getPermalink('/codigo-conducta')} class="underline">código de conducta</a>.</span>
</label>
</div>
<div class="block my-4">
<label for="studyCheck" class="flex items-center">
<input
type="checkbox"
id="studyCheck"
name="studyCheck"
class="text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<span id="studyCheckText" class="ml-2 text-sm font-medium text-gray-700">Acepto que se me podrá solicitar justificar la condición de estudiante antes del inicio del evento.</span>
</label>
</div>
<div class="mt-5">
<button class="btn-primary w-full" id="submit" type="submit">
Registrarme <Icon name="tabler:user-plus" class="w-6 h-6 pl-2" />
</button>
</div>
<div class="mt-3 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Al enviar, aceptas la <a href={getPermalink('/privacidad')} class="underline">política de privacidad</a>.</p>
</div>
</form>
<div id="success" class="hidden h-48 flex-col text-center justify-around">
<div class="flex justify-center">
<Icon name="tabler:circle-check" class="w-24 h-24 text-green-800" />
</div>
<p class="text-xl">El formulario se ha enviado con éxito.</p>
</div>
<div id="error" class="hidden h-48 flex-col text-center justify-around">
<div class="flex justify-center">
<Icon name="tabler:circle-x" class="w-24 h-24 text-red-800" />
</div>
<p class="text-xl">Ha habido un error, inténtalo de nuevo mas tarde o contáctanos por correo.</p>
</div>
</div>
</div>


<Steps
title="Próximos pasos:"
items={[
{
title: 'Análisis de tu solicitud',
description:
"Una vez que hayas enviado tu formulario, nuestro equipo revisará detenidamente tu solicitud. Analizaremos tus datos, experiencia y motivaciones para participar en HackUDC. Este proceso puede tardar unos días, así que te pedimos paciencia. Asegúrate de haber completado todos los campos correctamente para evitar retrasos.",
icon: 'tabler:analyze',
},
{
title: 'Confirmación de aceptación',
description:
"Después de revisar tu solicitud, te informaremos por correo electrónico si has sido seleccionado para participar en HackUDC. Si es así, recibirás una confirmación oficial con los pasos a seguir. Te recomendamos que revises tu correo electrónico regularmente para no perderte esta importante notificación.",
icon: 'tabler:message',
},
{
title: 'Información detallada del evento',
description:
'Una vez aceptado en HackUDC, te enviaremos toda la información relevante sobre el evento. Esto incluirá detalles como el programa, las actividades planificadas, y cualquier otra información logística necesaria. Mantente atento a tu correo electrónico para recibir esta información esencial y prepárate para una experiencia inolvidable.',
icon: 'tabler:calendar-event',
},
]}
/>

<Note icon="tabler:shield-heart">
<Fragment slot="content">
Puedes leer la <a href={getPermalink("/privacidad")} class="underline">política de privacidad</a> y el <a href={getPermalink("/codigo-conducta")} class="underline">código de conducta</a>.
Expand Down

0 comments on commit bb682ba

Please sign in to comment.