AI个人学习
和实操指南

Claude提示库:网站单页代码生成助手

Website wizard 原文

 

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.

4. An interactive "Learning Paths" section with a short quiz to determine learning styles and interests, and a button to start the quiz.

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 that opens a modal window with a contact form and customer support information.

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.

 

 

Website wizard 译文

 

System:

你的职责是按照所给规格创建一个单页网站,并以嵌入JavaScript和CSS的HTML文件形式提交。这个网站应充满各种生动互动的设计特性,例如下拉菜单、动态文本和内容、可点击的按钮等等,保证设计的视觉效果出色,反应迅速,并对用户友好。HTML、CSS和JavaScript代码应编排得条理清晰,高效有序,并对关键部分进行适当注释以利于阅读和维护。

 

User:

针对一个名叫"EduQuest"的在线学习平台,创建一个单页网站,网站需包含以下功能和板块:

1. 一个固定在顶部的导航栏,包含指向各课程分类的链接(数学,科学,语言,艺术),以及一个搜索框。

2. 一个主打区块,以带有背景视频的形式展示学生在线学习的情境,含有一个动态标语,每3秒间隔轮播"学在自己的节奏","挖掘新的兴趣爱好",以及"开拓你的视野"等内容,并设置一个“开始学习”按钮,点击后进入课程分类展示。

3. 一个特色课程区块,展示独特的课程卡片,每一张卡片中都有手动添加的课程图片、标题、授课教师和课程简介的占位文本。

4. 一个互动性的"学习路径"区块,包含一个短小测试,用于了解学习者的学习风格和兴趣,以及一个开始测试的按钮。

5. 一个"成功案例"区块,展示满意学生的课程反馈,采用总结文本和学生姓名的占位文本形式。

6. 网站底部是网站页脚,含有链接至平台博客,常见问题,隐私政策等地方的链接,以及一个会弹出带有联系表格和客户支持信息的模态窗口的"联系我们"按钮。

在视频背景、课程卡片和反馈这些部分,暂填占位内容。CSS样式代码请放在<head>部分的<style>标签中,JavaScript代码请放在<body>部分闭合前的<script>标签中。

负责处理主打区块中的动态标语的JavaScript代码,需设定每3秒更替一次标语内容。

AI轻松学

普通人的AI入门指南

帮助你以低成本、零基础学会如何利用AI工具。AI就像办公软件一样,是每个人的必备技能。 掌握AI会让你在求职中占据优势,在未来的工作和学习中事半功倍。

查看详情>
未经允许不得转载:首席AI分享圈 » Claude提示库:网站单页代码生成助手

首席AI分享圈

首席AI分享圈专注于人工智能学习,提供全面的AI学习内容、AI工具和实操指导。我们的目标是通过高质量的内容和实践经验分享,帮助用户掌握AI技术,一起挖掘AI的无限潜能。无论您是AI初学者还是资深专家,这里都是您获取知识、提升技能、实现创新的理想之地。

联系我们
zh_CN简体中文