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

Contenuto
SystemIl tuo compito è creare un sito web di una pagina basato sulle 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 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, Arte) e una barra di ricerca.
2. Una sezione hero con uno sfondo video che mostra studenti che imparano online, un 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 dei corsi.
3. Una sezione di corsi in evidenza che mostra schede dei corsi con segnaposto per immagini dei corsi, titoli, istruttori e descrizioni.
4. Una sezione “Percorsi di Apprendimento” interattiva 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 sul supporto 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 lo slogan dinamico nella sezione hero, ruotando tra i diversi slogan ogni 3 secondi.

​
Output di esempio

<!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="#">Arte</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>Qui va la descrizione del corso.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Immagine del Corso">
            <h3>Titolo del Corso</h3>
            <p>Istruttore: Anna Bianchi</p>
            <p>Qui va la descrizione del corso.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Storie di Successo</h2>
        <div class="testimonial">
            <p>"EduQuest mi ha aiutato ad imparare una nuova competenza e far avanzare 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 l'ha reso possibile. Grazie!"</p>
            <p>- Anna 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, Arte) e una barra di ricerca.

Una sezione hero con uno sfondo video segnaposto, 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”.

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

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 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( # predefinito a os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-3-5-sonnet-20241022",
  max_tokens=4000,
  temperature=0,
  system="Il tuo compito è creare un sito web di una pagina basato sulle 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 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, Arte) 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 dei corsi. \n \n3. Una sezione di corsi in evidenza che mostra schede dei corsi con segnaposto per immagini dei corsi, titoli, istruttori e descrizioni. \n \n4. Una sezione \"Percorsi di Apprendimento\" interattiva 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 sul supporto 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 lo slogan dinamico nella sezione hero, ruotando tra i diversi slogan ogni 3 secondi."
        }
      ]
    }
  ]
)
print(message.content)

Was this page helpful?

Chiaroveggente aziendaleEsperto di formule Excel