Maquetación web (Diseño a Html/Php) en 24 Horas. Proyecto Urgente. Desarollo front-end

El proyecto consiste en pasar el diseño que adjunto a html (debe ir un un archivo php). Enviare el archivo editable del diseño (Formato ai) y las imágenes necesarias exportadas a png.

Este proyecto debe completarse en 24 horas, esto es innegociable, no se aceptaran propuestas que especifiquen más de 24 horas y si a las 24 horas de comenzado el proyecto no está finalizado, se dará por finalizado como no cumplido. Lamento no poder dar más tiempo pero lamentablemente es el tiempo que tengo disponible. De todas formas es un proyecto sencillo para quien tenga experiencia en estas habilidades.

Enviare credenciales FTP / Cpanel para que se trabaje allí.

Se envía el diseño en formato desktop pero se lo debe configurar para que sea responsive y adaptable a celulares y tablets.

Cabezal:

En el cabezal el logo va en formato imagen pero el texto “Encuestas” debe ir en formato texto. Los links de “Inicio” y “Mis proyectos” deben ir como links a #, lo mismo que el icono de un ojo amarillo. El icono y link de “Ver código” debe abrir la ventana modal que se muestra en la página 5.

El botón de publicar va debe abrir una ventana modal cómo la de la segunda caja de la página 3 con el texto “¿Está seguro de que desea publicar?” y dos botones de “Si” y “No”, ambos botones deben cerrar la ventana sin hacer nada.

Sección “Crear nueva encuesta”

El campo de título debe estar limitado a 140 caracteres.

Los textos que aparecen en el diseño actualmente deben aparecer cómo placeholders.

El campo de descripción debe estar limitado a 180 caracteres y debe funcionar el contador de caracteres que aparezca en la esquina inferior derecha.

El icono de papelera debe borrar el contenido que haya escrito el usuario y volver al placeholder.

Si se activa la toggle de “Recopilar datos del usuario” debe aparecer un toggle igual con el texto “Solicitar número de cédula” que por defecto este deshabilitado.

Editor de preguntas:

Cuando carga no aparece ninguna pregunta y aparece simplemente el botón de “Agregar pregunta” (que en el diseño se muestra debajo de las preguntas). Al hacer clic pasa el mouse o hace clic sobre ese botón se expande y aparecen dos opciones “Texto abierto” y “Opciones de selección”.

La pregunta que en el diseño aparece cómo “Pregunta 1 (Texto abierto)” es un ejemplo de lo que se agrega si el usuario agrega una pregunta de texto abierto y la pregunta “Pregunta 2 (Opciones de selección)” es un ejemplo de lo que se agrega si el usuario agrega una pregunta de Opciones de selección. El usuario podrá agregar todas las preguntas que quiera y el número de pregunta que aparece en el título varía según en qué posición este ubicada la pregunta.

Con el icono de tres rayas verticales que esta al costado izquierdo del título “Pregunta” el usuario debe poder arrastrar (drag and drop) la pregunta para poder cambiar su orden.

Cada pregunta del lado derecho tiene un icono de tres puntos que al hacer clic se expande tal cómo se muestra en la pregunta dos. Esos iconos deben estar operativos, la opción “Duplicar” duplica la pregunta, es decir, crea una exactamente igual debajo (con los mismos contenidos que el usuario haya ingresado en los campos). La opción “Eliminar” es para eliminar la pregunta, primero debe abrir una caja modal, cómo la que se muestra en la segunda caja de la página 3, con el texto “¿Está seguro de que desea eliminar?” con dos botones. Si presiona “Si” se elimina la pregunta, si presiona “No” se cierra la ventana modal y no ocurre nada.

- Preguntas de texto abierto:

Las preguntas de texto abierto tienen primero un campo de texto abierto que debe estar limitado a 300 caracteres y tener un contador de caracteres en la esquina inferior derecha. En la esquina superior derecha tienen un icono de papelera que elimina lo que el usuario haya escrito en el campo.

Luego de esto tiene el texto de “Límite de caracteres” y un campo que debe sólo permitir ingresar números y sólo de 3 cifras. Por defecto debe decir 140.

Luego va otro campo, con las mismas características del primero pero con un límite de 180 caracteres.

- Preguntas de Opciones de selección:

Comienza con un área de texto “Texto de pregunta” igual a las preguntas de texto abierto y luego tiene la opción de agregar “Opciones de respuesta”. Por defecto tendrá 2 Opciones pero el usuario podrá agregar más con el icono de “+” que aparece al final.

Las opciones son campos de texto, el texto que númera las opciones, Ej “Opción 1”, es un placeholder. El icono de papelera abre una ventana modal cómo la que se muestra en la segunda caja de la página 3, con el texto “¿Está seguro de que desea eliminar?” con dos botones. Si presiona “Si” se elimina la pregunta, si presiona “No” se cierra la ventana modal y no ocurre nada.

Al costado de cada opción hay un switch que permite elegir entre texto (El icono que dice Aa) e imagen (El icono de imagen). Por defecto las opciones son agregadas cómo texto pero si el usuario selecciona imagen se pasa a mostrar cómo se muestra en la “Opción 3” del diseño. Cuando el usuario hace clic en el botón de “+” le debe aparecer la ventana del navegador para seleccionar una imagen. Cuando una imagen haya sido seleccionada se debe mostrar como en la primera caja de la página 3, es decir, se muestra la vista previa de la imagen subida y abajo un icono de papelera (que elimina la imagen subida pero mantiene la opción) y un botón de “Cambiar imagen” que hace que se vuelva a abrir la ventana del navegador para seleccionar imagen y remplazar así la imagen seleccionada.

Luego de esto tiene otra área de texto “Descripción” que funciona igual que las descriptas anteriormente.

Luego de esto tiene tres toggles, poner simplemente los toggles pero en esta etapa no deberás ponerle ninguna funcionalidad. Luego del texto “Limitar el número de selecciones permitidas” debe ir un campo de texto que este limitado a números.

Reglas de lógica condicional:

Al cargar la página no debe haber ninguna regla cargada, estas deben aparcer cuando el usuario hace clic en el botón de “Agregar regla”.

Todas las reglas deben ser cómo la segunda regla que se muestra en el diseño, es decir, con tres cuadros de selección. En esos campos de selección poner simplemente varias opciones numeradas “Pregunta 1”, “Pregunta 2”, “Pregunta 3”. El toggle ponerlo pero sin ninguna función. El icono de papelera debe mostrar primero un cuadro de confirmación (Cómo se especifico anteriormente) para eliminar la regla.

Opciones de resultados:

En esta sección poner las tres opciones con un selector de radio (sólo se puede seleccionar una opción”).

Diseño y estilo

En el cuadro “Tipografía de títulos“ el campo de “Familia” se debe poner este seleccionador de fuentes [login to view URL] (yo hice ese código, por lo que ponerlo tal cual, para que muestre esas fuentes listadas y muestre la vista previa de las fuentes al seleccionar).

Luego de eso va “Tamaño” que es un slider para seleccionar el tamaño de letra. El mínimo del slider debe ser 10 y el máximo 40. Debe mostrar en el campo numérico que aparece a su derecha el tamaño seleccionado por el slider. Para esto utilizar este código pero cambiándole el estilo [login to view URL]

En “Peso” debe aparecer estas opciones Thin (100), Extra Light (200), Light (300), Regular (400), Medium (500), Semi Bold (600), Bold (700), Extra Bold (800), Black (900), en el texto de las opciones va el nombre y el valor numérico entre paréntesis en el value va sólo el valor númerico.

En la opción de “Color” utilizar este código cambiándole el estilo [login to view URL]

El texto “Texto de ejemplo” debe cambiar automáticamente según las variables que se hayan seleccionado en el cuadro.

El cuadro “Tipografía de texto corrido“ funciona igual que el anterior.

El cuadro “Estilos de campos” tiene dos color pickers como los descriptos anteriormente y eso cambia el color de los dos campos de color que aparecen con el texto “Prueba”

En el cuadro de selección de bordes que dice “Bordes” debe haber tres opciones “Sin bordes” que hace que no hayan bordes, “Bordes redondeados” que hace que los bordes sean redondeados” y “Bordes rectos” que hace que los bordes sean rectos. Lo que seleccione el usuario debe reflejarse en las dos cajas de muesta que aparecen con el texto “Prueba” en caso que se muestren bordes, los bordes deben ser del color seleccionado en “Contorno o borde de los campos de respuesta (en caso de entradas de texto)”

En la caja “Estilos de botones” va n color picker y un seleccionador de bordes. Debe mostrar lo seleccionado en los dos botones de “Prueba”

En la caja “Colores de mensajes y estados” son varios color pciker, que van cómo los descriptos anteriormente.

El rectángulo (gráfica) de color que se muestra abajo, debe colorearse, la franja más grande (que en el diseño es naranja) con el color seleccionado en “Color principal gráficos de resultados“ y la otra franja (la que en el diseño es amarilla” debe colorearse con el color seleccionado en “Color secundario gráficos de resultados“

El botón de “Restaurar valores por defecto“ ponerlo cómo link a #

JavaScript PSD till HTML Frontend Development HTML PHP

Projekt-id: #39047857

Om projektet