Hugging Face's logo

Spaces:
chaojie
/
ai
Running

App Files Community
ai / index.html
chaojie's picture
chaojie
undefined - Initial Deployment
4f262f2 verified
raw
history blame contribute delete
47.5 kB
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI小创客 - 儿童AI动画创作课程</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.progress-ring__circle {
transition: stroke-dashoffset 0.5s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.drawer {
transition: transform 0.3s ease-out;
}
.drawer-hidden {
transform: translateX(100%);
}
</style>
</head>
<body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-robot text-3xl text-purple-600"></i>
<h1 class="text-2xl font-bold text-purple-800">AI小创客</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-purple-700 hover:text-purple-900 font-medium">首页</a>
<a href="#courses" class="text-gray-600 hover:text-purple-700 font-medium">课程</a>
<a href="#features" class="text-gray-600 hover:text-purple-700 font-medium">特色</a>
<a href="#testimonials" class="text-gray-600 hover:text-purple-700 font-medium">学员作品</a>
</div>
<button class="md:hidden text-gray-600" id="menu-toggle">
<i class="fas fa-bars text-2xl"></i>
</button>
<div class="hidden md:block">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full font-medium transition duration-300">
免费试学
</button>
</div>
</div>
</nav>
<!-- 移动菜单 -->
<div id="mobile-menu" class="hidden md:hidden fixed inset-0 bg-black bg-opacity-50 z-50">
<div class="bg-white w-4/5 h-full ml-auto p-6">
<div class="flex justify-between items-center mb-8">
<h2 class="text-xl font-bold text-purple-800">AI小创客</h2>
<button id="menu-close" class="text-gray-600">
<i class="fas fa-times text-2xl"></i>
</button>
</div>
<div class="flex flex-col space-y-4">
<a href="#" class="text-purple-700 hover:text-purple-900 font-medium py-2 border-b border-gray-100">首页</a>
<a href="#courses" class="text-gray-600 hover:text-purple-700 font-medium py-2 border-b border-gray-100">课程</a>
<a href="#features" class="text-gray-600 hover:text-purple-700 font-medium py-2 border-b border-gray-100">特色</a>
<a href="#testimonials" class="text-gray-600 hover:text-purple-700 font-medium py-2 border-b border-gray-100">学员作品</a>
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full font-medium transition duration-300 mt-4">
免费试学
</button>
</div>
</div>
</div>
<!-- 英雄区域 -->
<section class="py-12 md:py-20 px-4">
<div class="container mx-auto flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6">
用AI创作你的<br>
<span class="text-purple-600">第一部动画短片</span>
</h1>
<p class="text-lg text-gray-600 mb-8">
专为8-14岁儿童设计的AI动画创作课程，从零开始学习AI绘画、动画制作和创意表达，让你的想象力飞起来！
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-lg">
立即开始学习 <i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-medium transition duration-300">
<i class="fas fa-play-circle mr-2"></i> 观看介绍视频
</button>
</div>
</div>
<div class="md:w-1/2 relative">
<img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="儿童使用平板电脑创作"
class="rounded-2xl shadow-xl w-full max-w-lg mx-auto">
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg hidden md:block">
<div class="flex items-center">
<div class="relative w-12 h-12">
<svg class="w-full h-full" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
<circle cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="100 100" stroke-dashoffset="25" class="progress-ring__circle"></circle>
</svg>
<span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-purple-600">75%</span>
</div>
<div class="ml-3">
<p class="text-xs text-gray-500">课程完成度</p>
<p class="text-sm font-medium">AI动画基础</p>
</div>
</div>
</div>
<div class="absolute -top-6 -right-6 bg-yellow-100 p-3 rounded-full shadow-lg hidden md:block floating">
<i class="fas fa-lightbulb text-3xl text-yellow-500"></i>
</div>
</div>
</div>
</section>
<!-- 课程特色 -->
<section id="features" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">为什么选择AI小创客?</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">我们的课程专为儿童设计，让AI技术变得简单有趣</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-blue-50 p-8 rounded-2xl transition duration-300 hover:shadow-lg">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-brain text-3xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">AI轻松学</h3>
<p class="text-gray-600">将复杂的AI技术转化为简单易懂的模块，通过拖拽和可视化界面让孩子轻松掌握AI创作。</p>
</div>
<div class="bg-purple-50 p-8 rounded-2xl transition duration-300 hover:shadow-lg">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-layer-group text-3xl text-purple-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">渐进式学习</h3>
<p class="text-gray-600">从单幅AI绘画开始，逐步学习动画原理、角色设计，最终完成完整的动画短片创作。</p>
</div>
<div class="bg-pink-50 p-8 rounded-2xl transition duration-300 hover:shadow-lg">
<div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-child text-3xl text-pink-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">安全环境</h3>
<p class="text-gray-600">专为儿童设计的AI工具，过滤不适当内容，提供安全、健康的创作环境。</p>
</div>
</div>
</div>
</section>
<!-- 课程体系 -->
<section id="courses" class="py-16 bg-gradient-to-b from-white to-blue-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">动画创作学习路径</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">从零开始，逐步掌握AI动画创作全流程</p>
</div>
<div class="max-w-4xl mx-auto">
<!-- 课程进度条 -->
<div class="relative mb-12">
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded-full bg-gray-200">
<div style="width:20%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"></div>
</div>
<div class="flex justify-between text-sm text-gray-600">
<span>第一阶段</span>
<span>第二阶段</span>
<span>第三阶段</span>
<span>第四阶段</span>
<span>第五阶段</span>
</div>
</div>
<!-- 课程卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(1)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<span class="text-blue-600 font-bold">01</span>
</div>
<h3 class="text-lg font-bold text-gray-800">AI绘画初体验</h3>
</div>
<p class="text-gray-600 mb-4">学习使用AI工具生成第一幅绘画作品，了解基本操作和关键词描述技巧。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm text-gray-600">4.8 (120评价)</span>
</div>
<span class="text-sm px-3 py-1 bg-green-100 text-green-800 rounded-full">入门</span>
</div>
</div>
<div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(2)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
<span class="text-purple-600 font-bold">02</span>
</div>
<h3 class="text-lg font-bold text-gray-800">角色设计与生成</h3>
</div>
<p class="text-gray-600 mb-4">学习如何设计并生成动画角色，包括主角、配角和场景设计。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm text-gray-600">4.7 (98评价)</span>
</div>
<span class="text-sm px-3 py-1 bg-blue-100 text-blue-800 rounded-full">基础</span>
</div>
</div>
<div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(3)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mr-4">
<span class="text-pink-600 font-bold">03</span>
</div>
<h3 class="text-lg font-bold text-gray-800">动画原理与帧设计</h3>
</div>
<p class="text-gray-600 mb-4">了解动画基本原理，学习如何设计关键帧和过渡帧。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm text-gray-600">4.9 (76评价)</span>
</div>
<span class="text-sm px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full">中级</span>
</div>
</div>
<div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(4)">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
<span class="text-green-600 font-bold">04</span>
</div>
<h3 class="text-lg font-bold text-gray-800">完整短片创作</h3>
</div>
<p class="text-gray-600 mb-4">整合所学知识，创作一个完整的1-2分钟动画短片，包括故事板设计和配音。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm text-gray-600">5.0 (52评价)</span>
</div>
<span class="text-sm px-3 py-1 bg-red-100 text-red-800 rounded-full">高级</span>
</div>
</div>
</div>
<div class="text-center mt-10">
<button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-medium transition duration-300">
查看全部课程 <i class="fas fa-chevron-down ml-2"></i>
</button>
</div>
</div>
</div>
</section>
<!-- 学员作品展示 -->
<section id="testimonials" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">小学员们的精彩作品</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">看看其他小朋友用AI创作的动画短片</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg">
<div class="relative pt-[56.25%] overflow-hidden">
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="学员作品1"
class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition duration-300">
<i class="fas fa-play text-purple-600 text-xl"></i>
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-lg font-bold text-gray-800 mb-2">太空冒险记</h3>
<p class="text-gray-600 text-sm mb-4">10岁的小明用AI创作的科幻动画，讲述了一只太空猫的冒险故事。</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full overflow-hidden mr-3">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="学员头像"
class="w-full h-full object-cover">
</div>
<div>
<p class="text-sm font-medium text-gray-800">小明</p>
<p class="text-xs text-gray-500">10岁 | 学习3个月</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg">
<div class="relative pt-[56.25%] overflow-hidden">
<img src="https://images.unsplash.com/photo-1638913974023-cef988e81629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="学员作品2"
class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition duration-300">
<i class="fas fa-play text-purple-600 text-xl"></i>
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-lg font-bold text-gray-800 mb-2">森林音乐会</h3>
<p class="text-gray-600 text-sm mb-4">9岁的莉莉创作的童话动画，展现了森林动物们举办音乐会的欢乐场景。</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full overflow-hidden mr-3">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="学员头像"
class="w-full h-full object-cover">
</div>
<div>
<p class="text-sm font-medium text-gray-800">莉莉</p>
<p class="text-xs text-gray-500">9岁 | 学习2个月</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg">
<div class="relative pt-[56.25%] overflow-hidden">
<img src="https://images.unsplash.com/photo-1635070041053-8d62c9be5ecc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="学员作品3"
class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition duration-300">
<i class="fas fa-play text-purple-600 text-xl"></i>
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-lg font-bold text-gray-800 mb-2">机器人足球赛</h3>
<p class="text-gray-600 text-sm mb-4">11岁的小强创作的科幻体育动画，描绘了未来机器人足球比赛的精彩场面。</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full overflow-hidden mr-3">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="学员头像"
class="w-full h-full object-cover">
</div>
<div>
<p class="text-sm font-medium text-gray-800">小强</p>
<p class="text-xs text-gray-500">11岁 | 学习4个月</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-lg inline-flex items-center">
<i class="fas fa-photo-film mr-2"></i> 查看更多作品
</button>
</div>
</div>
</section>
<!-- 家长评价 -->
<section class="py-16 bg-blue-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">家长怎么说</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">听听家长们对AI小创客课程的评价</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<i class="fas fa-quote-left text-2xl text-purple-200 mr-2"></i>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<p class="text-gray-600 mb-6">我儿子以前对绘画没什么兴趣，但通过这个课程，他爱上了用AI创作。现在他每周都会主动完成课程任务，还经常给我们展示他的新作品。</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="家长头像"
class="w-full h-full object-cover">
</div>
<div>
<p class="font-medium text-gray-800">李妈妈</p>
<p class="text-sm text-gray-500">10岁男孩家长</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<i class="fas fa-quote-left text-2xl text-purple-200 mr-2"></i>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<p class="text-gray-600 mb-6">课程设计非常符合孩子的认知水平，老师讲解生动有趣。我女儿不仅学会了AI工具的使用，还培养了讲故事的能力，这对她的综合发展很有帮助。</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="家长头像"
class="w-full h-full object-cover">
</div>
<div>
<p class="font-medium text-gray-800">张爸爸</p>
<p class="text-sm text-gray-500">9岁女孩家长</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<i class="fas fa-quote-left text-2xl text-purple-200 mr-2"></i>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
</div>
</div>
<p class="text-gray-600 mb-6">作为家长，我最看重的是课程的安全性。AI小创客提供了过滤后的AI工具，让我不用担心孩子接触到不适当的内容。同时课程内容也很有教育意义。</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="家长头像"
class="w-full h-full object-cover">
</div>
<div>
<p class="font-medium text-gray-800">王妈妈</p>
<p class="text-sm text-gray-500">11岁男孩家长</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA区域 -->
<section class="py-16 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">准备好开启孩子的AI创作之旅了吗?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">现在报名即可获得免费试学课程和AI绘画工具包</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-full font-bold transition duration-300 shadow-lg">
立即免费试学 <i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-full font-bold transition duration-300">
<i class="fas fa-phone-alt mr-2"></i> 咨询课程详情
</button>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-6">
<i class="fas fa-robot text-3xl text-purple-400"></i>
<h3 class="text-2xl font-bold">AI小创客</h3>
</div>
<p class="text-gray-400 mb-6">专为8-14岁儿童设计的AI动画创作学习平台，让每个孩子都能成为数字时代的小小创作者。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-weixin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-weibo text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-tiktok text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-youtube text-xl"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6">课程体系</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">AI绘画基础</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">角色设计</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">动画原理</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">短片创作</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">高级特效</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">关于我们</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">团队介绍</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">教学理念</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">加入我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">媒体报道</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">合作伙伴</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">联系我们</h4>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-purple-400 mt-1 mr-3"></i>
<span class="text-gray-400">北京市海淀区中关村科技园</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt text-purple-400 mr-3"></i>
<span class="text-gray-400">400-123-4567</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-purple-400 mr-3"></i>
<span class="text-gray-400">hello@aikidmaker.com</span>
</li>
<li class="flex items-center">
<i class="fas fa-clock text-purple-400 mr-3"></i>
<span class="text-gray-400">周一至周五 9:00-18:00</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 AI小创客 版权所有</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">隐私政策</a>
<a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">服务条款</a>
<a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">儿童保护政策</a>
</div>
</div>
</div>
</footer>
<!-- 课程详情抽屉 -->
<div id="course-drawer" class="drawer fixed inset-y-0 right-0 w-full md:w-1/2 lg:w-1/3 bg-white shadow-xl z-50 overflow-y-auto drawer-hidden">
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-gray-800" id="course-title">课程标题</h3>
<button id="drawer-close" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div class="mb-6">
<img id="course-image" src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="课程封面"
class="w-full h-48 md:h-56 object-cover rounded-lg">
</div>
<div class="flex items-center mb-6">
<div class="flex items-center mr-6">
<i class="fas fa-star text-yellow-400 mr-2"></i>
<span class="text-gray-700" id="course-rating">4.8 (120评价)</span>
</div>
<div class="flex items-center">
<i class="fas fa-user-graduate text-purple-500 mr-2"></i>
<span class="text-gray-700" id="course-students">500+学员</span>
</div>
</div>
<div class="mb-6">
<h4 class="text-lg font-bold text-gray-800 mb-3">课程简介</h4>
<p class="text-gray-600" id="course-description">这里是课程详细描述内容，介绍课程的主要内容和学习目标。这个课程适合8-12岁儿童学习，通过生动有趣的方式教授AI绘画基础知识。</p>
</div>
<div class="mb-6">
<h4 class="text-lg font-bold text-gray-800 mb-3">你将学到</h4>
<ul class="space-y-2" id="course-learn">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">AI绘画工具的基本操作</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">关键词描述技巧</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">色彩和构图基础知识</span>
</li>
</ul>
</div>
<div class="mb-6">
<h4 class="text-lg font-bold text-gray-800 mb-3">课程难度</h4>
<span id="course-level" class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">入门</span>
</div>
<div class="mb-6">
<h4 class="text-lg font-bold text-gray-800 mb-3">课程时长</h4>
<div class="flex items-center">
<i class="fas fa-clock text-purple-500 mr-2"></i>
<span class="text-gray-600" id="course-duration">4周 | 每周2节课</span>
</div>
</div>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition duration-300">
立即报名 <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<script>
// 移动菜单切换
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
});
menuClose.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
// 课程详情抽屉
const drawer = document.getElementById('course-drawer');
const drawerClose = document.getElementById('drawer-close');
function showCourseDetail(courseId) {
// 根据courseId设置不同的课程内容
let courseData = {};
switch(courseId) {
case 1:
courseData = {
title: "AI绘画初体验",
image: "https://images.unsplash.com/photo-1638913662415-7a2d4c5f5396?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
rating: "4.8 (120评价)",
students: "500+学员",
description: "在这个入门课程中，孩子们将学习如何使用AI工具生成他们的第一幅绘画作品。课程从最基本的操作开始，逐步引导孩子掌握关键词描述技巧，让他们能够表达自己的创意并看到AI如何将其转化为视觉艺术作品。",
learn: [
"AI绘画工具的基本操作",
"关键词描述技巧",
"色彩和构图基础知识",
"如何调整和优化AI生成结果"
],
level: "入门",
duration: "4周 | 每周2节课"
};
break;
case 2:
courseData = {
title: "角色设计与生成",
image: "https://images.unsplash.com/photo-1638913974023-cef988e81629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
rating: "4.7 (98评价)",
students: "420+学员",
description: "这个课程专注于动画角色的设计与生成。孩子们将学习如何设计独特的角色形象，包括主角、配角和反派角色。课程还会教授如何保持角色在不同场景中的一致性，这是制作动画短片的基础技能。",
learn: [
"角色设计的基本原则",
"如何描述角色特征让AI理解",
"保持角色一致性的技巧",
"场景设计与角色搭配"
],
level: "基础",
duration: "6周 | 每周2节课"
};
break;
case 3:
courseData = {
title: "动画原理与帧设计",
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
rating: "4.9 (76评价)",
students: "350+学员",
description: "在这个中级课程中，孩子们将学习动画的基本原理，包括运动规律、时间控制和帧设计。课程会教授如何设计关键帧和过渡帧，使用AI工具生成连贯的动画序列，为最终的短片创作打下坚实基础。",
learn: [
"动画12项基本原则",
"关键帧与过渡帧设计",
"动作流畅性技巧",
"简单的表情和口型动画"
],
level: "中级",
duration: "8周 | 每周2节课"
};
break;
case 4:
courseData = {
title: "完整短片创作",
image: "https://images.unsplash.com/photo-1635070041053-8d62c9be5ecc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
rating: "5.0 (52评价)",
students: "280+学员",
description: "这是我们的高级课程，孩子们将整合之前学到的所有技能，创作一个完整的1-2分钟动画短片。课程包括故事板设计、分镜头脚本、AI动画生成、简单特效添加和配音指导，最终每个孩子都能完成属于自己的动画作品。",
learn: [
"故事板设计与分镜头脚本",
"完整动画序列生成",
"简单的特效添加",
"音效与配音技巧",
"最终作品导出与分享"
],
level: "高级",
duration: "10周 | 每周2节课"
};
break;
}
// 更新抽屉内容
document.getElementById('course-title').textContent = courseData.title;
document.getElementById('course-image').src = courseData.image;
document.getElementById('course-rating').textContent = courseData.rating;
document.getElementById('course-students').textContent = courseData.students;
document.getElementById('course-description').textContent = courseData.description;
const learnList = document.getElementById('course-learn');
learnList.innerHTML = '';
courseData.learn.forEach(item => {
const li = document.createElement('li');
li.className = 'flex items-start';
li.innerHTML = `
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">${item}</span>
`;
learnList.appendChild(li);
});
const levelSpan = document.getElementById('course-level');
levelSpan.textContent = courseData.level;
// 根据难度设置不同颜色
if(courseData.level === '入门') {
levelSpan.className = 'px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm';
} else if(courseData.level === '基础') {
levelSpan.className = 'px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm';
} else if(courseData.level === '中级') {
levelSpan.className = 'px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm';
} else {
levelSpan.className = 'px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm';
}
document.getElementById('course-duration').textContent = courseData.duration;
// 显示抽屉
drawer.classList.remove('drawer-hidden');
document.body.style.overflow = 'hidden';
}
drawerClose.addEventListener('click', () => {
drawer.classList.add('drawer-hidden');
document.body.style.overflow = 'auto';
});
// 点击抽屉外部关闭抽屉
window.addEventListener('click', (e) => {
if (e.target === drawer) {
drawer.classList.add('drawer-hidden');
document.body.style.overflow = 'auto';
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chaojie/ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>