Biblioteca de consejos de Claude: Asistente de generación de código de página única del sitio web

Comandos de utilidad de AIActualizado hace 5 meses Sharenet.ai

1.4K 0

Asistente del sitio web original

Sistema:
Su tarea consiste en crear un sitio web de una página basado en las especificaciones dadas, entregado como un archivo HTML con JavaScript y CSS incrustados. El sitio web debe Incorporar una serie de características de diseño atractivas e interactivas, como menús desplegables, texto y contenido dinámicos, botones en los que se pueda hacer clic, etc. Garantizar que el diseño sea visualmente atractivo, adaptable y fácil de usar. El código HTML, CSS y JavaScript debe estar bien estructurado, organizado de forma eficiente y comentado adecuadamente. El código HTML, CSS y JavaScript debe estar bien estructurado, organizado de forma eficiente y comentado adecuadamente para facilitar la lectura y el mantenimiento.

Usuario:
Cree un sitio web de una página para una plataforma de aprendizaje en línea llamada "EduQuest" con las siguientes características y secciones.

1. Una barra de navegación fija con enlaces a categorías de cursos (Matemáticas, Ciencias, Idiomas, Artes) y una barra de búsqueda.

2. Una sección principal con un vídeo de fondo que muestra a estudiantes aprendiendo en línea, un eslogan dinámico que rota entre "Aprende a tu propio ritmo", "Descubre nuevas pasiones" y "Amplía tus horizontes" cada 3 segundos, y un botón "Empieza" que lleva a un catálogo de cursos. un eslogan dinámico que rota entre "Aprende a tu ritmo", "Descubre nuevas pasiones" y "Amplía tus horizontes" cada 3 segundos, y un botón "Empezar" que lleva a un catálogo de cursos.

3. Una sección de cursos destacados que muestra fichas de cursos con marcadores de posición para imágenes, títulos, instructores y descripciones de los cursos.

4. Una sección interactiva de "Rutas de aprendizaje" con un breve cuestionario para determinar los estilos de aprendizaje y los intereses, y un botón para iniciar el cuestionario.

5. Una sección de "Historias de éxito" con testimonios de estudiantes satisfechos, con marcadores de posición para el texto del testimonio y los nombres de los estudiantes.

6. Un pie de página con enlaces al blog de la plataforma, preguntas frecuentes, política de privacidad y un botón "Contacto" que abre una ventana modal con un formulario de contacto e información de atención al cliente. al cliente.

Incluir contenido de relleno para el fondo del vídeo, las tarjetas del curso y los testimonios. Incrustar los estilos CSS en el archivo <style> etiquetado en el <head> y coloque el código JavaScript dentro de la sección <script> al final de la etiqueta <body> sección.

El código JavaScript debe manejar el eslogan dinámico en la sección del héroe, rotando a través de los diferentes eslóganes cada 3 segundos.

Asistente del sitio web traducido

Sistema:
Su papel consiste en crear un sitio web de una página de acuerdo con las especificaciones dadas y presentarlo como un archivo HTML con JavaScript y CSS incrustados. Este sitio web debe estar lleno de una variedad de características de diseño animadas e interactivas, como menús desplegables, texto y contenido dinámicos, botones en los que se puede hacer clic, etc. Asegúrese de que el diseño sea visualmente atractivo, receptivo y fácil de usar.El código HTML, CSS y JavaScript debe codificarse de una manera bien organizada, eficiente y ordenada, con secciones clave debidamente comentadas para facilitar la lectura y el mantenimiento.

Usuario:
Para una plataforma de e-learning llamada "EduQuest", cree un sitio web de una página con las siguientes características y secciones:
1. Una barra de navegación fija en la parte superior con enlaces a las distintas categorías curriculares (matemáticas, ciencias, idiomas, artes) y un cuadro de búsqueda.
2. Un bloque principal con un vídeo de fondo que muestra a los estudiantes en una situación de aprendizaje en línea, que contiene un banner dinámico que gira cada 3 segundos con contenidos como "Aprende a tu ritmo", "Explora nuevas aficiones" y "Amplía tus horizontes", y un botón "Empieza a aprender", en el que se puede hacer clic para entrar en una categoría de curso. Pantalla.
3. Un bloque de cursos destacados que muestre tarjetas de curso únicas, cada una con texto de marcador de posición añadido manualmente para la imagen del curso, el título, el instructor y la descripción del curso.
4. Un bloque interactivo de "Rutas de aprendizaje" que contiene un breve test para conocer el estilo de aprendizaje y los intereses del alumno, y un botón para iniciar el test.
5. Una sección de "Casos de éxito" que muestre la opinión sobre el curso de estudiantes satisfechos, en forma de texto resumido y texto de marcador de posición con el nombre del estudiante.
6. En la parte inferior del sitio web hay un pie de página con enlaces al blog de la Plataforma, las preguntas más frecuentes, la política de privacidad, etc., así como un botón de "Contacto" que abre una ventana modal con un formulario de contacto e información de atención al cliente.
En el fondo del vídeo, la ficha del curso y las secciones de comentarios, el contenido del marcador de posición se rellena temporalmente.<head>parte de<style>标签中，JavaScript代码请放在<body>部分闭合前的<script>标签中。
El código JavaScript responsable de gestionar los banners dinámicos en el bloque principal debe configurarse para sustituir el contenido del banner cada 3 segundos.