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

Contenuto
SystemIl tuo compito è creare un sito web di una 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 accattivanti 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 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 dei corsi (Matematica, Scienze, Lingue, Arti) e una barra di ricerca.
2. Una sezione hero con uno sfondo video che mostra studenti che imparano online, un tagline dinamico che ruota tra “Impara al tuo ritmo”, “Scopri nuove passioni” ed “Espandi i tuoi orizzonti” ogni 3 secondi, e un pulsante “Inizia” che porta a un catalogo dei corsi.
3. Una sezione corsi in evidenza che mostra schede dei corsi con segnaposto per immagini, titoli, istruttori e descrizioni dei corsi.
4. Una sezione interattiva “Percorsi di apprendimento” con un breve quiz per determinare gli stili di apprendimento e gli interessi, e un pulsante per iniziare il quiz.
5. Una sezione “Storie di successo” con testimonianze di studenti soddisfatti, con segnaposto per il testo delle testimonianze e i nomi degli studenti.
6. Un footer con collegamenti al blog della piattaforma, FAQ, informativa sulla privacy e un pulsante “Contattaci” che apre una finestra modale con un modulo di contatto e informazioni sull’assistenza clienti.

Includi contenuti segnaposto di riempimento 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 il tagline dinamico nella sezione hero, ruotando tra i diversi tagline ogni 3 secondi.

​
Esempio di output

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Piattaforma di apprendimento online</title>
    <style>
        /* Stili CSS */
        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="#">Matematica</a></li>
                <li><a href="#">Scienze</a></li>
                <li><a href="#">Lingue</a></li>
                <li><a href="#">Arti</a></li>
                <li><input type="text" placeholder="Cerca"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Benvenuto su EduQuest</h1>
        <p id="tagline">Impara al tuo ritmo</p>
        <button>Inizia</button>
    </section>

    <section class="featured-courses">
        <h2>Corsi in evidenza</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Immagine del corso">
            <h3>Titolo del corso</h3>
            <p>Istruttore: Mario Rossi</p>
            <p>Descrizione del corso qui.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Immagine del corso">
            <h3>Titolo del corso</h3>
            <p>Istruttore: Maria Bianchi</p>
            <p>Descrizione del corso qui.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Storie di successo</h2>
        <div class="testimonial">
            <p>"EduQuest mi ha aiutato a imparare una nuova abilità e far progredire la mia carriera. Altamente consigliato!"</p>
            <p>- Mario Rossi</p>
        </div>
        <div class="testimonial">
            <p>"Non avrei mai pensato di poter imparare una nuova lingua online, ma EduQuest lo ha reso possibile. Grazie!"</p>
            <p>- Maria Bianchi</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Informativa sulla privacy</a>
        <button>Contattaci</button>
    </footer>

    <script>
        // Codice JavaScript
        const taglines = [
            "Impara al tuo ritmo",
            "Scopri nuove passioni",
            "Espandi i tuoi orizzonti"
        ];

        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 pagina per “EduQuest” con le seguenti caratteristiche e sezioni:

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

Una sezione hero con uno sfondo video segnaposto, un tagline dinamico che ruota tra “Impara al tuo ritmo”, “Scopri nuove passioni” ed “Espandi i tuoi orizzonti” ogni 3 secondi, e un pulsante “Inizia”.

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

Una sezione “Storie di successo” con testimonianze di studenti soddisfatti, con segnaposto per il testo delle testimonianze e i nomi degli studenti.

Un footer con collegamenti al blog della piattaforma, FAQ, informativa sulla privacy e un pulsante “Contattaci”.

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 il tagline dinamico nella sezione hero, ruotando tra i diversi tagline 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

Nota: Claude 3 Opus sarà presto disponibile nell’API Bedrock.

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="Il tuo compito è creare un sito web di una 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 accattivanti 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 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 dei 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, un tagline dinamico che ruota tra \"Impara al tuo ritmo\", \"Scopri nuove passioni\" ed \"Espandi i tuoi orizzonti\" ogni 3 secondi, e un pulsante \"Inizia\" che porta a un catalogo dei corsi. \n \n3. Una sezione corsi in evidenza che mostra schede dei 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 gli stili di apprendimento e gli 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 delle testimonianze e i nomi degli studenti. \n \n6. Un footer con collegamenti al blog della piattaforma, FAQ, informativa sulla privacy e un pulsante \"Contattaci\" che apre una finestra modale con un modulo di contatto e informazioni sull'assistenza clienti. \n \nIncludi contenuti segnaposto di riempimento 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 il tagline dinamico nella sezione hero, ruotando tra i diversi tagline ogni 3 secondi."
        }
      ]
    }
  ]
)
print(message.content)
Chiaroveggente aziendaleEsperto di formule Excel