Website-Assistent Original
System:
Your task is to create a one-page website based on the given specifications, delivered as an HTML file with embedded JavaScript and CSS. The website should incorporate a variety of engaging and interactive design features, such as drop-down menus, dynamic text and content, clickable buttons, and more. Ensure that the design is visually appealing, responsive, and user-friendly. The HTML, CSS, and JavaScript code should be well-structured, efficiently organized, and properly commented for readability and maintainability.
Benutzer:
Create a one-page website for an online learning platform called “EduQuest” with the following features and sections:
1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.
2. A hero section with a video background showcasing students learning online, a dynamic tagline that rotates between “Learn at your own pace,” “Discover new passions,” and “Expand your horizons” every 3 seconds, and a “Get Started” button leading to a course catalog.
3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions.
4. An interactive “Learning Paths” section with a short quiz to determine learning styles and interests, and a button to start the quiz.
5. A “Success Stories” section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names.
6. A footer with links to the platform’s blog, FAQ, privacy policy, and a “Contact Us” button that opens a modal window with a contact form and customer support information.
Include filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the<style>tag in the<head>section and place the JavaScript code within the<script>tag at the end of the<body>section.
The JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds.
Website-Assistent übersetzt
System:
Ihre Aufgabe ist es, eine einseitige Website nach den vorgegebenen Spezifikationen zu erstellen und sie als HTML-Datei mit eingebettetem JavaScript und CSS einzureichen. Diese Website sollte mit einer Vielzahl lebendiger und interaktiver Gestaltungsmerkmale wie Dropdown-Menüs, dynamischen Texten und Inhalten, anklickbaren Schaltflächen usw. ausgestattet sein. Stellen Sie sicher, dass das Design optisch ansprechend, reaktionsschnell und benutzerfreundlich ist. Der HTML-, CSS- und JavaScript-Code sollte gut organisiert, effizient und ordentlich kodiert sein, wobei die wichtigsten Abschnitte zur Erleichterung des Lesens und der Wartung angemessen kommentiert werden.
Benutzer:
Erstellen Sie für eine E-Learning-Plattform namens "EduQuest" eine einseitige Website mit den folgenden Funktionen und Abschnitten:
1. eine Navigationsleiste oben, die Links zu den verschiedenen Kategorien des Lehrplans (Mathematik, Naturwissenschaften, Sprachen, Kunst) und ein Suchfeld enthält.
2. ein Hauptblock mit einem Hintergrundvideo, das Studenten in einer Online-Lernsituation zeigt, mit einem dynamischen Banner, das sich alle 3 Sekunden dreht, mit Inhalten wie "Lernen Sie in Ihrem eigenen Tempo", "Entdecken Sie neue Hobbys" und "Erweitern Sie Ihren Horizont" sowie einer Schaltfläche "Lernen beginnen". "Erweitern Sie Ihren Horizont" usw. und eine Schaltfläche "Lernen beginnen", die angeklickt werden kann, um die Kurskategorien anzuzeigen.
3. ein Block mit vorgestellten Kursen, der einzigartige Kurskarten mit manuell hinzugefügtem Platzhaltertext für das Kursbild, den Titel, den Kursleiter und die Kursbeschreibung zeigt.
4. ein interaktiver Block "Lernpfade", der einen kurzen Test enthält, um den Lernstil und die Interessen des Lernenden zu ermitteln, sowie eine Schaltfläche zum Starten des Tests.
5. ein Abschnitt "Erfolgsgeschichten" mit Kursfeedback von zufriedenen Studenten in Form von Zusammenfassungstext und Platzhaltertext mit dem Namen des Studenten.
6 Am unteren Rand der Website befindet sich eine Fußzeile mit Links zum Blog der Plattform, zu häufig gestellten Fragen, zur Datenschutzrichtlinie usw. sowie eine Schaltfläche "Kontakt", die ein modales Fenster mit einem Kontaktformular und Informationen zum Kundendienst öffnet.
Im Videohintergrund, in der Kurskarte und in den Feedback-Abschnitten werden vorübergehend Platzhalterinhalte eingefügt. Der CSS-Stilcode sollte in der<head>Anteil an<style>标签中，JavaScript代码请放在<body>部分闭合前的<script>标签中。
Der JavaScript-Code, der für die Handhabung der dynamischen Banner im Hauptblock verantwortlich ist, muss so eingestellt werden, dass der Inhalt des Banners alle 3 Sekunden ersetzt wird.
