Bibliothèque d'astuces de Claude : Assistant de génération de code pour les sites web à page unique
Assistant de site web original
Le système :
Votre tâche consiste à créer un site web d'une page sur la base des spécifications données, sous la forme d'un fichier HTML avec JavaScript et CSS intégrés. Le site web doit incorporer une variété de caractéristiques de conception attrayantes et interactives, telles que des menus déroulants, du texte et du contenu dynamiques, des boutons cliquables, etc. Veillez à ce que la conception soit visuellement attrayante, réactive et conviviale. Le code HTML, CSS et JavaScript doit être bien structuré, organisé efficacement et commenté correctement. Le code HTML, CSS et JavaScript doit être bien structuré, organisé de manière efficace et commenté de manière appropriée afin d'en faciliter la lecture et la maintenance.
Utilisateur :
Créez un site web d'une page pour une plateforme d'apprentissage en ligne appelée "EduQuest" avec les caractéristiques et les sections suivantes.
1. une barre de navigation fixe avec des liens vers les catégories de cours (mathématiques, sciences, langues, arts) et une barre de recherche.
2. une section "héros" avec un arrière-plan vidéo montrant des étudiants apprenant en ligne, un slogan dynamique qui alterne entre "Apprenez à votre rythme", "Découvrez de nouvelles passions" et "Élargissez vos horizons" toutes les 3 secondes, et un bouton "Commencez" menant à un catalogue de cours. un slogan dynamique qui alterne entre "Apprenez à votre rythme", "Découvrez de nouvelles passions" et "Élargissez vos horizons" toutes les 3 secondes, et un bouton "Commencez" menant à un catalogue de cours.
3. une section "Cours en vedette" affichant des fiches de cours avec des espaces réservés pour les images, les titres, les instructeurs et les descriptions des cours.
4. une section interactive "Parcours d'apprentissage" avec un court questionnaire pour déterminer les styles d'apprentissage et les centres d'intérêt, et un bouton pour lancer le questionnaire.
5. une section "Success Stories" présentant des témoignages d'étudiants satisfaits, avec des espaces réservés pour le texte du témoignage et les noms des étudiants.
6. un pied de page avec des liens vers le blog de la plateforme, la FAQ, la politique de confidentialité et un bouton "Contactez-nous" qui ouvre une fenêtre modale avec un formulaire de contact et des informations sur l'assistance à la clientèle. et des informations sur l'assistance à la clientèle.
Inclure un contenu de remplissage pour l'arrière-plan de la vidéo, les cartes de cours et les témoignages. Incorporer les styles CSS dans le fichier<style>étiqueté dans le<head>et placer le code JavaScript dans la section<script>à la fin de la balise<body>section.
Le code JavaScript doit gérer l'accroche dynamique dans la section du héros, en faisant défiler les différentes accroches toutes les 3 secondes.
Traduction de l'assistant du site web
Le système :
Votre rôle est de créer un site web d'une page selon les spécifications données et de le soumettre sous forme de fichier HTML avec JavaScript et CSS intégrés. Le code HTML, CSS et JavaScript doit être codé de manière bien organisée, efficace et ordonnée, avec des sections clés commentées de manière appropriée pour faciliter la lecture et la maintenance.
Utilisateur :
Pour une plateforme d'apprentissage en ligne appelée "EduQuest", créez un site web d'une page avec les caractéristiques et les sections suivantes :
1. une barre de navigation fixée en haut, contenant des liens vers les différentes catégories de programmes (mathématiques, sciences, langues, arts), et un champ de recherche.
2. un bloc principal avec une vidéo en arrière-plan montrant des étudiants dans une situation d'apprentissage en ligne, contenant une bannière dynamique qui tourne toutes les 3 secondes avec un contenu tel que "Apprenez à votre rythme", "Découvrez de nouveaux passe-temps" et "Élargissez vos horizons", et un bouton "Commencez à apprendre", sur lequel il est possible de cliquer pour entrer dans une catégorie de cours. Affichage.
3. un bloc "Cours en vedette" présentant des fiches de cours uniques, chacune avec un texte de remplacement ajouté manuellement pour l'image du cours, le titre, l'instructeur et la description du cours.
4. un bloc interactif "Parcours d'apprentissage" contenant un court test pour comprendre le style d'apprentissage et les intérêts de l'apprenant, ainsi qu'un bouton pour démarrer le test.
5. une section "Success Stories" (témoignages de réussite) montrant les réactions au cours d'étudiants satisfaits, sous la forme d'un texte résumé et d'un texte de remplacement avec le nom de l'étudiant.
6) Au bas du site web se trouve un pied de page contenant des liens vers le blog de la plateforme, la foire aux questions, la politique de confidentialité, etc. ainsi qu'un bouton "Contactez-nous" qui ouvre une fenêtre modale avec un formulaire de contact et des informations sur l'assistance à la clientèle.
Dans l'arrière-plan de la vidéo, la carte de cours et les sections de commentaires, le contenu des espaces réservés est temporairement rempli.Le code de style CSS doit être placé dans la section<head>part de<style>标签中，JavaScript代码请放在<body>部分闭合前的<script>标签中。
Le code JavaScript responsable de la gestion des bannières dynamiques dans le bloc principal doit être configuré pour remplacer le contenu de la bannière toutes les 3 secondes.
© déclaration de droits d'auteur
Article copyright Cercle de partage de l'IA Tous, prière de ne pas reproduire sans autorisation.
Articles connexes
Pas de commentaires...
Français 
简体中文 
English 
日本語 
한국어 
Русский 
Español 
Deutsch 
Português do Brasil