Copia questo prompt nella nostra Console per sviluppatori per provarlo tu stesso!

Contenuto
SystemIl tuo compito è creare un sito web di una sola pagina in base alle specifiche fornite, consegnato come file HTML con JavaScript e CSS incorporati. Il sito web dovrebbe incorporare una varietà di funzionalità di design coinvolgenti e interattive, come menu a discesa, testo e contenuti dinamici, pulsanti cliccabili e altro ancora. Assicurati che il design sia visivamente accattivante, reattivo e facile da usare. Il codice HTML, CSS e JavaScript dovrebbe essere ben strutturato, organizzato in modo efficiente e adeguatamente commentato per la leggibilità e la manutenibilità.
UserCrea un sito web di una sola pagina per una piattaforma di apprendimento online chiamata “EduQuest” con le seguenti caratteristiche e sezioni:

1. Una barra di navigazione fissa con collegamenti alle categorie di corsi (Matematica, Scienze, Lingue, Arti) e una barra di ricerca.
2. Una sezione hero con uno sfondo video che mostra studenti che imparano online, uno slogan dinamico che ruota tra “Impara al tuo ritmo”, “Scopri nuove passioni” e “Espandi i tuoi orizzonti” ogni 3 secondi, e un pulsante “Inizia” che porta a un catalogo di corsi.
3. Una sezione di corsi in evidenza che mostra schede di corsi con segnaposto per immagini, titoli, istruttori e descrizioni dei corsi.
4. Una sezione interattiva “Percorsi di apprendimento” con un breve quiz per determinare stili di apprendimento e interessi, e un pulsante per iniziare il quiz.
5. Una sezione “Storie di successo” con testimonianze di studenti soddisfatti, con segnaposto per il testo della testimonianza e i nomi degli studenti.
6. Un footer con collegamenti al blog della piattaforma, FAQ, politica sulla privacy e un pulsante “Contattaci” che apre una finestra modale con un modulo di contatto e informazioni sul supporto clienti.

Includi contenuti segnaposto per lo sfondo video, le schede dei corsi e le testimonianze. Incorpora gli stili CSS all’interno del tag <style> nella sezione <head> e posiziona il codice JavaScript all’interno del tag <script> alla fine della sezione <body>.

Il codice JavaScript dovrebbe gestire lo slogan dinamico nella sezione hero, ruotando tra i diversi slogan ogni 3 secondi.

​
Esempio di 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>

Questo codice crea un sito web di una sola pagina per “EduQuest” con le seguenti caratteristiche e sezioni:

Una barra di navigazione fissa con collegamenti alle categorie di corsi (Matematica, Scienze, Lingue, Arti) e una barra di ricerca.

Una sezione hero con uno sfondo video segnaposto, uno slogan dinamico che ruota tra “Learn at your own pace”, “Discover new passions” e “Expand your horizons” ogni 3 secondi, e un pulsante “Get Started”.

Una sezione di corsi in evidenza che mostra schede di corsi con segnaposto per immagini, titoli, istruttori e descrizioni dei corsi.

Una sezione “Success Stories” con testimonianze di studenti soddisfatti, con segnaposto per il testo della testimonianza e i nomi degli studenti.

Un footer con collegamenti al blog della piattaforma, FAQ, politica sulla privacy e un pulsante “Contact Us”.

Gli stili CSS sono incorporati all’interno del tag <style> nella sezione <head> e il codice JavaScript è posizionato all’interno del tag <script> alla fine della sezione <body>.

Il codice JavaScript gestisce lo slogan dinamico nella sezione hero, ruotando tra i diversi slogan ogni 3 secondi utilizzando la funzione setInterval.

Si noti che lo sfondo video, le immagini dei corsi e le testimonianze sono segnaposto e dovrebbero essere sostituiti con contenuti reali.

​
Richiesta 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="Il tuo compito è creare un sito web di una sola pagina in base alle specifiche fornite, consegnato come file HTML con JavaScript e CSS incorporati. Il sito web dovrebbe incorporare una varietà di funzionalità di design coinvolgenti e interattive, come menu a discesa, testo e contenuti dinamici, pulsanti cliccabili e altro ancora. Assicurati che il design sia visivamente accattivante, reattivo e facile da usare. Il codice HTML, CSS e JavaScript dovrebbe essere ben strutturato, organizzato in modo efficiente e adeguatamente commentato per la leggibilità e la manutenibilità.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Crea un sito web di una sola pagina per una piattaforma di apprendimento online chiamata \"EduQuest\" con le seguenti caratteristiche e sezioni: \n \n1. Una barra di navigazione fissa con collegamenti alle categorie di corsi (Matematica, Scienze, Lingue, Arti) e una barra di ricerca. \n \n2. Una sezione hero con uno sfondo video che mostra studenti che imparano online, uno slogan dinamico che ruota tra \"Impara al tuo ritmo,\" \"Scopri nuove passioni,\" e \"Espandi i tuoi orizzonti\" ogni 3 secondi, e un pulsante \"Inizia\" che porta a un catalogo di corsi. \n \n3. Una sezione di corsi in evidenza che mostra schede di corsi con segnaposto per immagini, titoli, istruttori e descrizioni dei corsi. \n \n4. Una sezione interattiva \"Percorsi di apprendimento\" con un breve quiz per determinare stili di apprendimento e interessi, e un pulsante per iniziare il quiz. \n \n5. Una sezione \"Storie di successo\" con testimonianze di studenti soddisfatti, con segnaposto per il testo della testimonianza e i nomi degli studenti. \n \n6. Un footer con collegamenti al blog della piattaforma, FAQ, politica sulla privacy e un pulsante \"Contattaci\" che apre una finestra modale con un modulo di contatto e informazioni sul supporto clienti. \n \nIncludi contenuti segnaposto per lo sfondo video, le schede dei corsi e le testimonianze. Incorpora gli stili CSS all'interno del tag `<style>` nella sezione `<head>` e posiziona il codice JavaScript all'interno del tag `<script>` alla fine della sezione `<body>`. \n \nIl codice JavaScript dovrebbe gestire lo slogan dinamico nella sezione hero, ruotando tra i diversi slogan ogni 3 secondi."
        }
      ]
    }
  ]
)
print(message.content)