Website wizard

Create one-page websites based on user specifications.

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.

user

Create a one-page website for an online learning platform called "EduQuest" with the following features and sections:

1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.

2. 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.

3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions.

5. A "Success Stories" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names.

6. A footer with links to the platform's blog, FAQ, privacy policy, and a "Contact Us" button.

Include 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.

The JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds.

Here is the one-page website for the EduQuest online learning platform:

html
<!DOCTYPE html>
<html>
<head>
  <title>EduQuest - Online Learning Platform</title>
  
  <style>
    /* CSS styles go here */
    
    .navbar {
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .hero {
      background-color: #ccc; 
      text-align: center;
      padding: 50px;
    }
    
    .course-card {
      border: 1px solid #ddd;
      padding: 20px;
      width: 200px;  
    }
    
    .testimonial {
      padding: 20px;
      border: 1px solid #aaa;
    }
    
    .footer {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center; 
    }
  </style>
  
</head>

<body>

  <!-- Navigation bar -->
  <nav class="navbar">
    <a href="#">Math</a> 
    <a href="#">Science</a>
    <a href="#">Languages</a>
    <a href="#">Arts</a>
    
    <input type="text" placeholder="Search courses">
  </nav>

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

  <!-- Featured courses -->
  <section class="featured">
    <h2>Featured Courses</h2>
    
    <div class="course-card">
      <img src="course1.png">
      <h3>Course 1</h3>  
      <p>By Teacher 1</p>
      <p>Course 1 description</p>    
    </div>
    
    <div class="course-card">
      <img src="course2.png">
      <h3>Course 2</h3>    
      <p>By Teacher 2</p>
      <p>Course 2 description</p>
    </div>
  </section>

  <!-- Success stories -->
  <section class="stories">
    <h2>Success Stories</h2>
    
    <div class="testimonial">
      <p>&quot;I loved this course!&quot;</p>
      <p>- Jane D.</p>    
    </div>
    
    <div class="testimonial">
      <p>&quot;I learned so much.&quot;</p>
      <p>- Sam W.</p>
    </div>

  </section>
  
  <!-- Footer -->
  <footer class="footer"> 
    <a href="#">Blog</a>
    <a href="#">FAQ</a> 
    <a href="#">Privacy Policy</a>
      
    <button>Contact Us</button>
  </footer>
  
  <script>
    // JavaScript code goes here
    
    const taglines = [
      "Learn at your own pace",  
      "Discover new passions",
      "Expand your horizons"
    ];
    
    let index = 0;
    
    setInterval(() => {
      document.querySelector(".tagline").textContent = taglines[index];
      index = (index + 1) % taglines.length; 
    }, 3000);
    
  </script>
  
</body>
</html>

I've included placeholder content and styling to demonstrate the various sections and features. The JavaScript rotates through the array of taglines dynamically. You would need to fill in actual content, images, links, etc. and refine the styling further. But this should serve as a good starting point showcasing the requested one-page layout and functionality. Let me know if you need any clarification or have additional requirements to implement!

API request

python
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=2000,
      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":"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\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&#x27;s blog, FAQ, privacy policy, and a \"Contact Us\" button.\n\nInclude filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the `&lt;style&gt;` tag in the `&lt;head&gt;` section and place the JavaScript code within the `&lt;script&gt;` tag at the end of the `&lt;body&gt;` 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)