Web Layout (Design to Html/Php) in 24 Hours. Urgent Project. Front-End Development

The project involves converting the attached design to HTML and embedding it within a PHP file. The editable design file in AI format will be provided, along with the necessary images exported to PNG. This project must be completed within 24 hours, and this deadline is non-negotiable. Proposals specifying more than 24 hours will not be accepted. If the project is not completed within the 24-hour timeframe, it will be considered unsuccessful. I regret the limited time available, but this is the timeframe I can offer. The project is relatively simple for someone experienced in these tasks. I will provide FTP/Cpanel credentials for the developer to work directly on the server. The design is provided in desktop format, but it should be configured to be responsive and adaptable to mobile and tablet devices. In the header, the logo will be an image, but the text “Encuestas” must be rendered as plain text. The links “Inicio” and “Mis proyectos” should point to #, as should the yellow eye icon. The icon and link “Ver código” should open a modal window similar to the one displayed on page 5. The publish button should open a modal similar to the second box on page 3 with the text “¿Está seguro de que desea publicar?” and two buttons, “Sí” and “No.” Both buttons should close the modal without taking any further action. The title field in the “Crear nueva encuesta” section should have a limit of 140 characters. Placeholder text should be used for all input fields as shown in the design. The description field should have a limit of 180 characters, and a character counter should be displayed in the bottom-right corner. The trash icon should clear the user’s input and restore the placeholder text. If the toggle “Recopilar datos del usuario” is enabled, a second toggle labeled “Solicitar número de cédula” should appear, disabled by default. When the question editor loads, no questions should be displayed initially. Instead, a button labeled “Agregar pregunta” should be present, as shown below the questions in the design. Clicking or hovering over the button should expand it to reveal two options: “Texto abierto” and “Opciones de selección.” The question labeled “Pregunta 1 (Texto abierto)” in the design represents what appears when the user selects an open-text question, while “Pregunta 2 (Opciones de selección)” is an example of what appears when the user selects a multiple-choice question. The user can add as many questions as they want, and the question numbers should adjust dynamically based on their order. The icon with three vertical lines to the left of the question title should allow users to drag and drop questions to rearrange them. The three-dot icon on the right side of each question should be operational. The “Duplicar” option should duplicate the question, creating an identical copy with the same content directly below the original. The “Eliminar” option should trigger a confirmation modal similar to the second box on page 3 with the text “¿Está seguro de que desea eliminar?” and two buttons, “Sí” and “No.” Selecting “Sí” deletes the question, while “No” closes the modal without any changes. Open-text questions should include an input field limited to 300 characters, with a character counter displayed in the bottom-right corner. A trash icon in the top-right corner should clear the user’s input. Below this, the text “Límite de caracteres” and a numeric input field should be included. The numeric field should only accept three-digit numbers, defaulting to 140. Another input field, similar to the first, should be included but with a 180-character limit. Selection-option questions should begin with a “Texto de pregunta” field, followed by a section where users can add response options. By default, two options should be displayed, but more can be added using the “+” icon. Each option is a text field with a placeholder like “Opción 1.” The trash icon should trigger a confirmation modal before deleting the option. A toggle next to each option should allow users to switch between text and image-based options. By default, options should be text, but selecting the image option should display the option as shown in “Opción 3” of the design. When users click the “+” button, a file browser should open to allow image selection. Once an image is selected, it should be displayed with a preview, a trash icon to remove the image, and a “Cambiar imagen” button to select a new image. Below this section, an additional “Descripción” text area should be provided. Three toggle switches should also be included without functionality. Following the text “Limitar el número de selecciones permitidas,” a numeric input field should be provided. Conditional logic rules should not be displayed initially. Users can add them by clicking the “Agregar regla” button. Each rule should have three dropdown fields and options like “Pregunta 1,” “Pregunta 2,” and “Pregunta 3.” The trash icon should trigger a confirmation modal before deleting a rule. The results section should include three options, each with a radio button allowing only one option to be selected. In the design and style section, the “Tipografía de títulos” box should include a font selector , i will send you this code, you will only have to change its style. The “Tamaño” slider should allow font sizes between 10 and 40, with the selected size displayed in the adjacent numeric field, i will send you this code, you will only have to change its style. The “Peso” option should include values like Thin (100), Extra Light (200), Light (300), and so on, up to Black (900). For color selection,i will send you this code, you will only have to change its style, should be used but with a customized appearance. The sample text should update dynamically based on the selected options. The “Tipografía de texto corrido” section should function similarly to the titles section. The “Estilos de campos” section should include color pickers to adjust the color of the test fields. The “Bordes” section should offer three options: no borders, rounded borders, and straight borders. The user’s selection should be applied to the test boxes. The border color should be determined by the color selected in the “Contorno o borde de los campos de respuesta” option. In the “Estilos de botones” section, a color picker and border selector should be provided, with the selected styles applied to the buttons. The “Colores de mensajes y estados” section should include multiple color pickers. The color rectangle displayed below should dynamically update based on the primary and secondary colors selected. The “Restaurar valores por defecto” button should be a link to #.