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 ordnungsgemäß kommentiert sein, um die Lesbarkeit und Wartbarkeit zu gewährleisten.
BenutzerErstellen Sie eine einseitige Website für eine Online-Lernplattform namens “EduQuest” mit den folgenden Funktionen und Abschnitten:

1. Eine fixierte Navigationsleiste mit Links zu Kurskategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste.
2. Ein Hero-Bereich mit einem Videohintergrund, der Studenten beim Online-Lernen zeigt, einem dynamischen Slogan, der alle 3 Sekunden zwischen “Lernen Sie in Ihrem eigenen Tempo”, “Entdecken Sie neue Leidenschaften” und “Erweitern Sie Ihren Horizont” wechselt, und einer “Jetzt starten”-Schaltfläche, die zu einem Kurskatalog führt.
3. Ein Abschnitt mit empfohlenen Kursen, der Kurskarten 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 und die Namen der Studenten.
6. Eine Fußzeile mit Links zum Blog, FAQ und Datenschutzrichtlinien der Plattform sowie eine Schaltfläche “Kontakt”, die ein modales Fenster mit einem Kontaktformular und Kundendienstinformationen öffnet.

Fügen Sie Platzhalterinhalte für den Videohintergrund, die Kurskarten 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 verwalten 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="Suche"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Willkommen bei EduQuest</h1>
        <p id="tagline">Lernen Sie in Ihrem eigenen Tempo</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 = [
            "Lernen Sie in Ihrem eigenen Tempo",
            "Entdecken Sie neue Leidenschaften",
            "Erweitern Sie Ihren Horizont"
        ];

        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 Kursategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste.

Ein Hero-Bereich mit einem Platzhalter-Videohintergrund, einem dynamischen Slogan, der alle 3 Sekunden zwischen “Lernen Sie in Ihrem eigenen Tempo”, “Entdecken Sie neue Leidenschaften” und “Erweitern Sie Ihren Horizont” wechselt, und einer “Jetzt starten”-Schaltfläche.

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

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

Eine Fußzeile mit Links zum Blog, FAQ und Datenschutzrichtlinien 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 verwaltet 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

Hinweis: Claude 3 Opus wird bald für die Bedrock API verfügbar sein.

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 ordnungsgemäß kommentiert sein, um die Lesbarkeit und Wartbarkeit zu gewährleisten.",
  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 Kursategorien (Mathematik, Naturwissenschaften, Sprachen, Kunst) und einer Suchleiste. \n \n2. Ein Hero-Bereich mit einem Videohintergrund, der Studenten beim Online-Lernen zeigt, einem dynamischen Slogan, der alle 3 Sekunden zwischen \"Lernen Sie in Ihrem eigenen Tempo\", \"Entdecken Sie neue Leidenschaften\" und \"Erweitern Sie Ihren Horizont\" wechselt, und einer \"Jetzt starten\"-Schaltfläche, die zu einem Kurskatalog führt. \n \n3. Ein Abschnitt mit empfohlenen Kursen, der Kurskarten 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 und die Namen der Studenten. \n \n6. Eine Fußzeile mit Links zum Blog, FAQ und Datenschutzrichtlinien der Plattform sowie eine Schaltfläche \"Kontakt\", die ein modales Fenster mit einem Kontaktformular und Kundendienstinformationen öffnet. \n \nFügen Sie Platzhalterinhalte für den Videohintergrund, die Kurskarten 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 verwalten und alle 3 Sekunden zwischen den verschiedenen Slogans wechseln."
        }
      ]
    }
  ]
)
print(message.content)
Unternehmens-HellseherExcel-Formel-Experte