Kopieren Sie diese Aufforderung in unsere Entwickler-Konsole, um es selbst auszuprobieren!

Inhalt
SystemIhre Aufgabe ist es, eine einseitige Website basierend auf den gegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS geliefert wird. Die Website sollte eine Vielzahl von ansprechenden und interaktiven Designelementen enthalten, wie z.B. Dropdown-Menüs, dynamischen Text und Inhalt, anklickbare Schaltflächen und mehr. Achten Sie darauf, dass das Design optisch ansprechend, responsiv und benutzerfreundlich ist. Der HTML-, CSS- und JavaScript-Code sollte gut strukturiert, effizient organisiert und für bessere Lesbarkeit und Wartbarkeit ordnungsgemäß kommentiert sein.
UserErstellen Sie eine einseitige Website für eine Online-Lernplattform namens “EduQuest” mit den folgenden Funktionen und Abschnitten:

1. Eine fixierte Navigationsleiste mit Links zu Kursekategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste.
2. Ein Hero-Bereich mit einem Videohintergrund, der Schüler beim Online-Lernen zeigt, einem dynamischen Slogan, der alle 3 Sekunden zwischen “In Ihrem eigenen Tempo lernen”, “Neue Leidenschaften entdecken” und “Ihren Horizont erweitern” wechselt, und einer “Jetzt starten”-Schaltfläche, die zu einem Kurskatalog führt.
3. Ein Abschnitt mit empfohlenen Kursen, der Kurs-Karten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt.
4. Ein interaktiver Abschnitt “Lernpfade” mit einem kurzen Quiz zur Bestimmung von Lernstilen und Interessen sowie einer Schaltfläche zum Starten des Quiz.
5. Ein Abschnitt “Erfolgsgeschichten” mit Erfahrungsberichten zufriedener Studenten, mit Platzhaltern für den Erfahrungsbericht-Text und die Namen der Studenten.
6. Eine Fußzeile mit Links zum Blog, FAQ und Datenschutzrichtlinie der Plattform sowie eine “Kontakt”-Schaltfläche, die ein modales Fenster mit einem Kontaktformular und Kundendienstinformationen öffnet.

Fügen Sie Platzhalter-Inhalte für den Videohintergrund, die Kurs-Karten und die Erfahrungsberichte ein. Betten Sie die CSS-Stile innerhalb des <style>-Tags im <head>-Bereich ein und platzieren Sie den JavaScript-Code innerhalb des <script>-Tags am Ende des <body>-Bereichs.

Der JavaScript-Code sollte den dynamischen Slogan im Hero-Bereich handhaben und alle 3 Sekunden zwischen den verschiedenen Slogans wechseln.

​
Beispielausgabe

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online-Lernplattform</title>
    <style>
        /* CSS-Stile */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
        }

        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .hero button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .featured-courses, .success-stories {
            padding: 40px;
        }

        .course-card {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        .testimonial {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        footer button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #fff;
            color: #333;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Mathematik</a></li>
                <li><a href="#">Naturwissenschaften</a></li>
                <li><a href="#">Sprachen</a></li>
                <li><a href="#">Kunst</a></li>
                <li><input type="text" placeholder="Suchen"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Willkommen bei EduQuest</h1>
        <p id="tagline">In Ihrem eigenen Tempo lernen</p>
        <button>Jetzt starten</button>
    </section>

    <section class="featured-courses">
        <h2>Empfohlene Kurse</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Kursbild">
            <h3>Kurstitel</h3>
            <p>Dozent: Max Mustermann</p>
            <p>Kursbeschreibung hier.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Kursbild">
            <h3>Kurstitel</h3>
            <p>Dozentin: Erika Musterfrau</p>
            <p>Kursbeschreibung hier.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Erfolgsgeschichten</h2>
        <div class="testimonial">
            <p>"EduQuest hat mir geholfen, eine neue Fähigkeit zu erlernen und meine Karriere voranzubringen. Sehr empfehlenswert!"</p>
            <p>- Max Mustermann</p>
        </div>
        <div class="testimonial">
            <p>"Ich hätte nie gedacht, dass ich online eine neue Sprache lernen kann, aber EduQuest hat es möglich gemacht. Danke!"</p>
            <p>- Erika Musterfrau</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Datenschutzrichtlinie</a>
        <button>Kontakt</button>
    </footer>

    <script>
        // JavaScript-Code
        const taglines = [
            "In Ihrem eigenen Tempo lernen",
            "Neue Leidenschaften entdecken",
            "Ihren Horizont erweitern"
        ];

        let index = 0;
        const taglineElement = document.getElementById("tagline");

        function rotateTagline() {
            taglineElement.textContent = taglines[index];
            index = (index + 1) % taglines.length;
        }

        setInterval(rotateTagline, 3000);
    </script>
</body>
</html>

Dieser Code erstellt eine einseitige Website für “EduQuest” mit den folgenden Funktionen und Abschnitten:

Eine fixierte Navigationsleiste mit Links zu Kursekategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste.

Ein Hero-Bereich mit einem Platzhalter-Videohintergrund, einem dynamischen Slogan, der alle 3 Sekunden zwischen “In Ihrem eigenen Tempo lernen”, “Neue Leidenschaften entdecken” und “Ihren Horizont erweitern” wechselt, und einer “Jetzt starten”-Schaltfläche.

Ein Abschnitt mit empfohlenen Kursen, der Kurs-Karten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt.

Ein Abschnitt “Erfolgsgeschichten” mit Erfahrungsberichten zufriedener Studenten, mit Platzhaltern für den Erfahrungsbericht-Text und die Namen der Studenten.

Eine Fußzeile mit Links zum Blog, FAQ und Datenschutzrichtlinie der Plattform sowie eine “Kontakt”-Schaltfläche.

Die CSS-Stile sind innerhalb des <style>-Tags im <head>-Bereich eingebettet und der JavaScript-Code befindet sich innerhalb des <script>-Tags am Ende des <body>-Bereichs.

Der JavaScript-Code handhabt den dynamischen Slogan im Hero-Bereich und wechselt alle 3 Sekunden zwischen den verschiedenen Slogans mithilfe der setInterval-Funktion.

Bitte beachten Sie, dass der Videohintergrund, die Kursbilder und die Erfahrungsberichte Platzhalter sind und durch tatsächliche Inhalte ersetzt werden sollten.

​
API-Anfrage

import anthropic

client = anthropic.Anthropic( # defaults to os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-3-opus-20240229",
  max_tokens=4000,
  temperature=0,
  system="Ihre Aufgabe ist es, eine einseitige Website basierend auf den gegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS geliefert wird. Die Website sollte eine Vielzahl von ansprechenden und interaktiven Designelementen enthalten, wie z.B. Dropdown-Menüs, dynamischen Text und Inhalt, anklickbare Schaltflächen und mehr. Achten Sie darauf, dass das Design optisch ansprechend, responsiv und benutzerfreundlich ist. Der HTML-, CSS- und JavaScript-Code sollte gut strukturiert, effizient organisiert und für bessere Lesbarkeit und Wartbarkeit ordnungsgemäß kommentiert sein.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Erstellen Sie eine einseitige Website für eine Online-Lernplattform namens \"EduQuest\" mit den folgenden Funktionen und Abschnitten: \n \n1. Eine fixierte Navigationsleiste mit Links zu Kursekategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste. \n \n2. Ein Hero-Bereich mit einem Videohintergrund, der Schüler beim Online-Lernen zeigt, einem dynamischen Slogan, der alle 3 Sekunden zwischen \"In Ihrem eigenen Tempo lernen\", \"Neue Leidenschaften entdecken\" und \"Ihren Horizont erweitern\" wechselt, und einer \"Jetzt starten\"-Schaltfläche, die zu einem Kurskatalog führt. \n \n3. Ein Abschnitt mit empfohlenen Kursen, der Kurs-Karten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt. \n \n4. Ein interaktiver Abschnitt \"Lernpfade\" mit einem kurzen Quiz zur Bestimmung von Lernstilen und Interessen sowie einer Schaltfläche zum Starten des Quiz. \n \n5. Ein Abschnitt \"Erfolgsgeschichten\" mit Erfahrungsberichten zufriedener Studenten, mit Platzhaltern für den Erfahrungsbericht-Text und die Namen der Studenten. \n \n6. Eine Fußzeile mit Links zum Blog, FAQ und Datenschutzrichtlinie der Plattform sowie eine \"Kontakt\"-Schaltfläche, die ein modales Fenster mit einem Kontaktformular und Kundendienstinformationen öffnet. \n \nFügen Sie Platzhalter-Inhalte für den Videohintergrund, die Kurs-Karten und die Erfahrungsberichte ein. Betten Sie die CSS-Stile innerhalb des `<style>`-Tags im `<head>`-Bereich ein und platzieren Sie den JavaScript-Code innerhalb des `<script>`-Tags am Ende des `<body>`-Bereichs. \n \nDer JavaScript-Code sollte den dynamischen Slogan im Hero-Bereich handhaben und alle 3 Sekunden zwischen den verschiedenen Slogans wechseln."
        }
      ]
    }
  ]
)
print(message.content)
Unternehmens-HellseherExcel-Formel-Experte