Website-Assistent

	Inhalt
System	Ihre Aufgabe ist es, eine einseitige Website basierend auf den gegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS bereitgestellt wird. Die Website sollte eine Vielzahl von ansprechenden und interaktiven Designfunktionen wie Dropdown-Menüs, dynamische Texte und Inhalte, anklickbare Schaltflächen und mehr enthalten. Stellen Sie sicher, dass das Design visuell 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.
User	Erstellen Sie eine einseitige Website für eine Online-Lernplattform namens „EduQuest" mit den folgenden Funktionen und Abschnitten: 1. Eine feste Navigationsleiste mit Links zu Kurskategorien (Mathematik, Naturwissenschaften, Sprachen, Künste) und eine Suchleiste. 2. Ein Hero-Bereich mit Videohintergrund, der Schüler beim Online-Lernen zeigt, ein dynamisches Tagline, das alle 3 Sekunden zwischen „Lernen Sie in Ihrem eigenen Tempo", „Entdecken Sie neue Leidenschaften" und „Erweitern Sie Ihre Horizonte" wechselt, und eine Schaltfläche „Erste Schritte", die zu einem Kurskatalog führt. 3. Ein Bereich mit ausgewählten Kursen, der Kurskarten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt. 4. Ein interaktiver Bereich „Lernpfade" mit einem kurzen Quiz zur Bestimmung von Lernstilen und Interessen sowie eine Schaltfläche zum Starten des Quiz. 5. Ein Bereich „Erfolgsgeschichten" mit Testimonials von zufriedenen Schülern, mit Platzhaltern für den Testimonialtext und Schülernamen. 6. Eine Fußzeile mit Links zum Blog der Plattform, FAQ, Datenschutzrichtlinie und eine Schaltfläche „Kontaktieren Sie uns", die ein modales Fenster mit einem Kontaktformular und Kundenunterstützungsinformationen öffnet. Fügen Sie Platzhalterinhalte für den Videohintergrund, Kurskarten und Testimonials ein. Betten Sie die CSS-Stile im Tag `<style>` im Abschnitt `<head>` ein und platzieren Sie den JavaScript-Code im Tag `<script>` am Ende des Abschnitts `<body>`. Der JavaScript-Code sollte das dynamische Tagline im Hero-Bereich verarbeiten und alle 3 Sekunden durch die verschiedenen Taglines wechseln.

Inhalt

System

Ihre Aufgabe ist es, eine einseitige Website basierend auf den gegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS bereitgestellt wird. Die Website sollte eine Vielzahl von ansprechenden und interaktiven Designfunktionen wie Dropdown-Menüs, dynamische Texte und Inhalte, anklickbare Schaltflächen und mehr enthalten. Stellen Sie sicher, dass das Design visuell 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.

User

Erstellen Sie eine einseitige Website für eine Online-Lernplattform namens „EduQuest" mit den folgenden Funktionen und Abschnitten:

1. Eine feste Navigationsleiste mit Links zu Kurskategorien (Mathematik, Naturwissenschaften, Sprachen, Künste) und eine Suchleiste.
2. Ein Hero-Bereich mit Videohintergrund, der Schüler beim Online-Lernen zeigt, ein dynamisches Tagline, das alle 3 Sekunden zwischen „Lernen Sie in Ihrem eigenen Tempo", „Entdecken Sie neue Leidenschaften" und „Erweitern Sie Ihre Horizonte" wechselt, und eine Schaltfläche „Erste Schritte", die zu einem Kurskatalog führt.
3. Ein Bereich mit ausgewählten Kursen, der Kurskarten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt.
4. Ein interaktiver Bereich „Lernpfade" mit einem kurzen Quiz zur Bestimmung von Lernstilen und Interessen sowie eine Schaltfläche zum Starten des Quiz.
5. Ein Bereich „Erfolgsgeschichten" mit Testimonials von zufriedenen Schülern, mit Platzhaltern für den Testimonialtext und Schülernamen.
6. Eine Fußzeile mit Links zum Blog der Plattform, FAQ, Datenschutzrichtlinie und eine Schaltfläche „Kontaktieren Sie uns", die ein modales Fenster mit einem Kontaktformular und Kundenunterstützungsinformationen öffnet.

Fügen Sie Platzhalterinhalte für den Videohintergrund, Kurskarten und Testimonials ein. Betten Sie die CSS-Stile im Tag <style> im Abschnitt <head> ein und platzieren Sie den JavaScript-Code im Tag <script> am Ende des Abschnitts <body>.

Der JavaScript-Code sollte das dynamische Tagline im Hero-Bereich verarbeiten und alle 3 Sekunden durch die verschiedenen Taglines wechseln.

Beispielausgabe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online Learning Platform</title>
    <style>
        /* CSS Styles */
        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="#">Math</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Search"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Welcome to EduQuest</h1>
        <p id="tagline">Learn at your own pace</p>
        <button>Get Started</button>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: John Doe</p>
            <p>Course description goes here.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: Jane Smith</p>
            <p>Course description goes here.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest helped me learn a new skill and advance my career. Highly recommended!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I never thought I could learn a new language online, but EduQuest made it possible. Thank you!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Privacy Policy</a>
        <button>Contact Us</button>
    </footer>

    <script>
        // JavaScript Code
        const taglines = [
            "Learn at your own pace",
            "Discover new passions",
            "Expand your horizons"
        ];

        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 feste Navigationsleiste mit Links zu Kurskategorien (Mathematik, Naturwissenschaften, Sprachen, Künste) und eine Suchleiste.

Ein Hero-Bereich mit Videohintergrund als Platzhalter, ein dynamisches Tagline, das alle 3 Sekunden zwischen „Lernen Sie in Ihrem eigenen Tempo", „Entdecken Sie neue Leidenschaften" und „Erweitern Sie Ihre Horizonte" wechselt, und eine Schaltfläche „Erste Schritte".

Ein Bereich mit ausgewählten Kursen, der Kurskarten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt.

Ein Bereich „Erfolgsgeschichten" mit Testimonials von zufriedenen Schülern, mit Platzhaltern für den Testimonialtext und Schülernamen.

Eine Fußzeile mit Links zum Blog der Plattform, FAQ, Datenschutzrichtlinie und eine Schaltfläche „Kontaktieren Sie uns".

Die CSS-Stile sind im Tag <style> im Abschnitt <head> eingebettet, und der JavaScript-Code ist im Tag <script> am Ende des Abschnitts <body> platziert.

Der JavaScript-Code verarbeitet das dynamische Tagline im Hero-Bereich und wechselt alle 3 Sekunden durch die verschiedenen Taglines mithilfe der setInterval-Funktion.

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

	Inhalt
System	Ihre Aufgabe ist es, eine einseitige Website basierend auf den gegebenen Spezifikationen zu erstellen, die als HTML-Datei mit eingebettetem JavaScript und CSS bereitgestellt wird. Die Website sollte eine Vielzahl von ansprechenden und interaktiven Designfunktionen wie Dropdown-Menüs, dynamische Texte und Inhalte, anklickbare Schaltflächen und mehr enthalten. Stellen Sie sicher, dass das Design visuell 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.
User	Erstellen Sie eine einseitige Website für eine Online-Lernplattform namens „EduQuest" mit den folgenden Funktionen und Abschnitten: 1. Eine feste Navigationsleiste mit Links zu Kurskategorien (Mathematik, Naturwissenschaften, Sprachen, Künste) und eine Suchleiste. 2. Ein Hero-Bereich mit Videohintergrund, der Schüler beim Online-Lernen zeigt, ein dynamisches Tagline, das alle 3 Sekunden zwischen „Lernen Sie in Ihrem eigenen Tempo", „Entdecken Sie neue Leidenschaften" und „Erweitern Sie Ihre Horizonte" wechselt, und eine Schaltfläche „Erste Schritte", die zu einem Kurskatalog führt. 3. Ein Bereich mit ausgewählten Kursen, der Kurskarten mit Platzhaltern für Kursbilder, Titel, Dozenten und Beschreibungen anzeigt. 4. Ein interaktiver Bereich „Lernpfade" mit einem kurzen Quiz zur Bestimmung von Lernstilen und Interessen sowie eine Schaltfläche zum Starten des Quiz. 5. Ein Bereich „Erfolgsgeschichten" mit Testimonials von zufriedenen Schülern, mit Platzhaltern für den Testimonialtext und Schülernamen. 6. Eine Fußzeile mit Links zum Blog der Plattform, FAQ, Datenschutzrichtlinie und eine Schaltfläche „Kontaktieren Sie uns", die ein modales Fenster mit einem Kontaktformular und Kundenunterstützungsinformationen öffnet. Fügen Sie Platzhalterinhalte für den Videohintergrund, Kurskarten und Testimonials ein. Betten Sie die CSS-Stile im Tag `<style>` im Abschnitt `<head>` ein und platzieren Sie den JavaScript-Code im Tag `<script>` am Ende des Abschnitts `<body>`. Der JavaScript-Code sollte das dynamische Tagline im Hero-Bereich verarbeiten und alle 3 Sekunden durch die verschiedenen Taglines wechseln.

Inhalt

System

User

Beispielausgabe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online Learning Platform</title>
    <style>
        /* CSS Styles */
        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="#">Math</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Search"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Welcome to EduQuest</h1>
        <p id="tagline">Learn at your own pace</p>
        <button>Get Started</button>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: John Doe</p>
            <p>Course description goes here.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: Jane Smith</p>
            <p>Course description goes here.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest helped me learn a new skill and advance my career. Highly recommended!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I never thought I could learn a new language online, but EduQuest made it possible. Thank you!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Privacy Policy</a>
        <button>Contact Us</button>
    </footer>

    <script>
        // JavaScript Code
        const taglines = [
            "Learn at your own pace",
            "Discover new passions",
            "Expand your horizons"
        ];

        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>