Claude's Tip Library: Website-Assistent für die Generierung von Single Page Code

Website-Assistent Original

System:

Ihre Aufgabe ist es, eine einseitige Website auf der Grundlage der vorgegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS geliefert wird. Die Website sollte eine Vielzahl von ansprechenden und interaktiven Designmerkmalen enthalten, wie z. B. Dropdown-Menüs, dynamische Texte und Inhalte, anklickbare Schaltflächen und mehr. Stellen Sie sicher, dass das Design optisch ansprechend, responsiv und benutzerfreundlich ist. Der HTML-, CSS- und JavaScript-Code sollte gut strukturiert, effizient organisiert und ordnungsgemäß kommentiert sein. Der HTML-, CSS- und JavaScript-Code sollte gut strukturiert, effizient organisiert und ordnungsgemäß kommentiert sein, um die Lesbarkeit und Wartbarkeit zu gewährleisten.

 

Benutzer:

Erstellen Sie eine einseitige Website für eine Online-Lernplattform namens "EduQuest" mit den folgenden Funktionen und Bereichen.

1. eine feste Navigationsleiste mit Links zu Kurskategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und eine Suchleiste.

2. eine Hero-Sektion mit einem Videohintergrund, der Studenten beim Online-Lernen zeigt, einer dynamischen Tagline, die alle 3 Sekunden zwischen "Lernen Sie in Ihrem eigenen Tempo", "Entdecken Sie neue Leidenschaften" und "Erweitern Sie Ihren Horizont" wechselt, und einer Schaltfläche "Loslegen", die zu einem Kurskatalog führt. eine dynamische Tagline, die alle 3 Sekunden zwischen "Lernen Sie in Ihrem eigenen Tempo", "Entdecken Sie neue Leidenschaften" und "Erweitern Sie Ihren Horizont" wechselt, sowie eine Schaltfläche "Loslegen", die zu einem Kurskatalog führt.

3. ein Abschnitt mit vorgestellten Kursen, der Kurskarten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt.

4. ein interaktiver Abschnitt "Lernwege" mit einem kurzen Quiz zur Ermittlung von Lernstilen und Interessen sowie einer Schaltfläche zum Starten des Quiz.

5. eine Rubrik "Erfolgsgeschichten" mit Erfahrungsberichten zufriedener Schüler, mit Platzhaltern für den Text des Erfahrungsberichts und die Namen der Schüler.

6. eine Fußzeile mit Links zum Blog der Plattform, zu den häufig gestellten Fragen (FAQ), zu den Datenschutzrichtlinien und zu einer Schaltfläche "Kontakt", die ein modales Fenster mit einem Kontaktformular und Informationen zum Kundensupport öffnet Informationen zum Kundendienst.

Fügen Sie Platzhalterinhalte für den Videohintergrund, die Kurskarten und die Zeugnisse ein. Betten Sie die CSS-Stile in die  getaggt im  Abschnitt und platzieren Sie den JavaScript-Code innerhalb der  Tag am Ende der Datei  Abschnitt.

Der JavaScript-Code sollte die dynamische Tagline im Hero-Abschnitt verarbeiten und die verschiedenen Taglines alle 3 Sekunden durchlaufen.

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", "Erschließen Sie sich neue Hobbys" und "Erweitern Sie Ihren Horizont", und einer Schaltfläche "Lernen beginnen", die angeklickt werden kann, um eine Kurskategorie zu betreten. Anzeige.

3. ein Block mit vorgestellten Kursen, in dem einzelne Kurskarten mit manuell hinzugefügtem Platzhaltertext für das Kursbild, den Titel, den Kursleiter und die Kursbeschreibung präsentiert werden.

4. einen interaktiven Block "Lernpfade" mit einem kurzen Test, um den Lernstil und die Interessen des Lernenden zu ermitteln, und einer 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.

Der Leitfaden für Laien zum Einstieg in die KI

Hilft Ihnen, die Nutzung von KI-Tools kostengünstig und von Null an zu erlernen.KI ist, wie Bürosoftware, eine wesentliche Fähigkeit für jeden. Die Beherrschung von KI verschafft Ihnen einen Vorteil bei der Stellensuche und die Hälfte des Aufwands bei Ihrer zukünftigen Arbeit und Ihrem Studium.

Details ansehen>