Salin prompt ini ke dalam Console pengembang kami untuk mencobanya sendiri!

Konten
SystemTugas Anda adalah membuat website satu halaman berdasarkan spesifikasi yang diberikan, disampaikan sebagai file HTML dengan JavaScript dan CSS yang disematkan. Website tersebut harus menggabungkan berbagai fitur desain yang menarik dan interaktif, seperti menu drop-down, teks dan konten dinamis, tombol yang dapat diklik, dan lainnya. Pastikan desainnya menarik secara visual, responsif, dan ramah pengguna. Kode HTML, CSS, dan JavaScript harus terstruktur dengan baik, terorganisir secara efisien, dan diberi komentar dengan tepat untuk keterbacaan dan kemudahan pemeliharaan.
UserBuat website satu halaman untuk platform pembelajaran online bernama “EduQuest” dengan fitur dan bagian berikut:

1. Bilah navigasi tetap dengan tautan ke kategori kursus (Matematika, Sains, Bahasa, Seni) dan bilah pencarian.
2. Bagian hero dengan latar belakang video yang menampilkan siswa belajar online, tagline dinamis yang berganti antara “Belajar dengan kecepatan Anda sendiri,” “Temukan hasrat baru,” dan “Perluas wawasan Anda” setiap 3 detik, dan tombol “Mulai” yang mengarah ke katalog kursus.
3. Bagian kursus unggulan yang menampilkan kartu kursus dengan placeholder untuk gambar kursus, judul, instruktur, dan deskripsi.
4. Bagian “Jalur Pembelajaran” interaktif dengan kuis singkat untuk menentukan gaya belajar dan minat, dan tombol untuk memulai kuis.
5. Bagian “Kisah Sukses” yang menampilkan testimoni dari siswa yang puas, dengan placeholder untuk teks testimoni dan nama siswa.
6. Footer dengan tautan ke blog platform, FAQ, kebijakan privasi, dan tombol “Hubungi Kami” yang membuka jendela modal dengan formulir kontak dan informasi dukungan pelanggan.

Sertakan konten placeholder pengisi untuk latar belakang video, kartu kursus, dan testimoni. Sematkan gaya CSS dalam tag <style> di bagian <head> dan tempatkan kode JavaScript dalam tag <script> di akhir bagian <body>.

Kode JavaScript harus menangani tagline dinamis di bagian hero, berganti di antara tagline yang berbeda setiap 3 detik.

​
Contoh output

<!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>

Kode ini membuat website satu halaman untuk “EduQuest” dengan fitur dan bagian berikut:

Bilah navigasi tetap dengan tautan ke kategori kursus (Math, Science, Languages, Arts) dan bilah pencarian.

Bagian hero dengan latar belakang video placeholder, tagline dinamis yang berganti antara “Learn at your own pace,” “Discover new passions,” dan “Expand your horizons” setiap 3 detik, dan tombol “Get Started”.

Bagian kursus unggulan yang menampilkan kartu kursus dengan placeholder untuk gambar kursus, judul, instruktur, dan deskripsi.

Bagian “Success Stories” yang menampilkan testimoni dari siswa yang puas, dengan placeholder untuk teks testimoni dan nama siswa.

Footer dengan tautan ke blog platform, FAQ, kebijakan privasi, dan tombol “Contact Us”.

Gaya CSS disematkan dalam tag <style> di bagian <head>, dan kode JavaScript ditempatkan dalam tag <script> di akhir bagian <body>.

Kode JavaScript menangani tagline dinamis di bagian hero, berganti di antara tagline yang berbeda setiap 3 detik menggunakan fungsi setInterval.

Harap dicatat bahwa latar belakang video, gambar kursus, dan testimoni adalah placeholder dan harus diganti dengan konten aktual.

​
Permintaan API

import anthropic

client = anthropic.Anthropic( # defaults to os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-opus-4-20250514",
  max_tokens=4000,
  temperature=0,
  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.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Create a one-page website for an online learning platform called \"EduQuest\" with the following features and sections: \n \n1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar. \n \n2. 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. \n \n3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions. \n \n4. An interactive \"Learning Paths\" section with a short quiz to determine learning styles and interests, and a button to start the quiz. \n \n5. A \"Success Stories\" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names. \n \n6. 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. \n \nInclude 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. \n \nThe JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds."
        }
      ]
    }
  ]
)
print(message.content)