diff --git a/README.md b/README.md index 47ded3e6238dcc784f3ff4458ba8ad760733aeec..f7eee16b8a4f98bff1891d38d6f71ca8c034d7e5 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,859 @@ -# UPC-开源黑客松 +# AI辅助学习 #### 介绍 -UPC-开源黑客松：一个专注于技术创新与协作的开源项目，旨在通过黑客松活动促进开发者之间的交流与合作，共同推动技术进步。 - +- 响应式设计，适配各种设备 +- 现代化UI设计，渐变色彩搭配 +- 流畅的动画效果和交互体验 +- 实时AI对话功能 +- 数据可视化展示 #### 软件架构 软件架构说明 +PlainText +ai-learning-platform/ -#### 安装教程 +├── index.html          # 主页面文件 + +├── styles.css          # 样式文件 + +├── script.js           # JavaScript交互逻辑 -1. xxxx -2. xxxx -3. xxxx +├── README.md           # 项目说明文档 +└── 截图文件 + +#### 安装教程 + 方式一：直接使用（推荐） +1. 无需安装 ：这是最简单的方式，直接在浏览器中打开即可使用 +2. 操作步骤 ： + - 找到项目文件夹中的 index.html 文件 + - 双击该文件，系统会自动用默认浏览器打开 + - 开始体验AI辅助学习平台的所有功能 +方式二：本地服务器运行（推荐开发者使用） 环境准备 +确保你的电脑已安装以下任意一种环境： + +- Python （推荐，简单易用） +- Node.js （适合前端开发者） +- PHP （适合PHP开发者） #### 使用说明 -1. xxxx -2. xxxx -3. xxxx +- 智能推荐系统 ：基于学习进度和兴趣推荐学习内容 +- 24小时AI助教 ：随时解答疑问，提供个性化学习建议 +- 学习数据分析 ：深度分析学习数据，生成详细报告 +- 目标追踪管理 ：设定学习目标，AI实时追踪进度 +- 智能复习计划 ：基于遗忘曲线安排复习计划 +- 多语言支持 ：支持多种语言学习` +## 1. HTML文件 (index.html) +`index.html` + + + +     +     +    AI辅助学习平台 +     +     + + +     +         +             +                

AI学习助手

+             +             +                首页 +                功能 +                体验 +                关于 +             +         +     + +     +         +             +                智能AI，开启学习新纪元 +                个性化学习路径，AI助教全天候陪伴

+                 +                    立即体验 +                    了解更多 +                 +             +             +                 +             +         +     + +     +         +            核心功能 +             +                 +                    🤖 +                    

智能推荐系统

+                    

基于学习进度和兴趣，AI智能推荐最适合的学习内容和路径

+                 +                 +                    👨🏫 +                    

24小时AI助教

+                    

随时解答疑问，提供个性化学习建议

+                 +                 +                    📊 +                    

学习数据分析

+                    

深度分析学习数据，生成详细报告，帮助优化学习策略

+                 +                 +                    🎯 +                    

目标追踪管理

+                    

设定学习目标，AI实时追踪进度，提供激励和提醒

+                 +                 +                    📚 +                    

智能复习计划

+                    

基于遗忘曲线，智能安排复习计划，巩固学习成果

+                 +                 +                    🌐 +                    

多语言支持

+                    

支持多种语言学习，打破语言障碍

+                 +             +         +     + +     +         +            AI对话体验中心 +             +                 +                     +                         +                            

你好！我是你的AI学习助手。请问我可以帮你什么？

+                         +                     +                 +                 +                     +                    发送 +                 +                 +                    制定学习计划 +                    推荐学习资源 +                    解答疑问 +                 +             +         +     + +     +         +             +                 +                    0 +                    活跃用户 +                 +                 +                    0 +                    学习课程 +                 +                 +                    0 +                    用户满意度% +                 +                 +                    0 +                    全天候服务 +                 +             +         +     + +     +         +            关于我们 +             +                 +                    

专业教育，AI赋能

+                    

我们致力于利用先进的人工智能技术，为学习者提供个性化、高效率的学习体 +                    验。平台集成了智能推荐、个性化辅导、学习分析等多项核心功能，帮助用户提升学 +                    习效果。

+                    

我们的团队由教育专家、AI工程师和设计师组成，共同打造最适合现代学习者的 +                    智能学习平台。

+                 +                 +                    👨‍🏫 +                    🤖 +                    🎨 +                    💻 +                 +             +         +     + +     +         +             +                 +                    

AI学习助手

+                    

智能AI，开启学习新纪元

+                 +                 +                    

联系方式

+                    

邮箱：contact@ailearning.com

+                    

电话：400-888-8888

+                 +                 +                    

快速链接

+                    首页 +                    功能 +                    体验 +                    关于 +                 +             +             +                

© 2024 AI学习助手. 保留所有权利.

+             +         +     + +     + + +2.CSS文件 +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Noto Sans SC', sans-serif; + line-height: 1.6; + color: #333; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.navbar { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 1rem 0; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-logo h1 { + font-size: 1.8rem; + font-weight: 700; +} + +.nav-menu { + display: flex; + gap: 2rem; +} + +.nav-link { + color: white; + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-link:hover { + color: #ffd700; +} + +.hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 120px 0 80px; + margin-top: 60px; +} + +.hero .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-title { + font-size: 3rem; + margin-bottom: 1.5rem; + line-height: 1.2; +} + +.hero-subtitle { + font-size: 1.2rem; + margin-bottom: 2rem; + opacity: 0.9; +} + +.hero-buttons { + display: flex; + gap: 1rem; + margin-top: 2rem; +} + +.btn { + padding: 12px 24px; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary { + background: white; + color: #667eea; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +} + +.btn-secondary { + background: transparent; + color: white; + border: 2px solid white; +} + +.btn-secondary:hover { + background: white; + color: #667eea; +} + +.btn-outline { + background: transparent; + color: #667eea; + border: 2px solid #667eea; +} + +.btn-outline:hover { + background: #667eea; + color: white; +} + +.ai-brain { + width: 300px; + height: 300px; + background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 70%), + radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 70%); + border-radius: 50%; + animation: pulse 3s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.features { + padding: 80px 0; +} + +.section-title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 4rem; + color: #333; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.feature-card { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #667eea; +} + +.demo { + padding: 80px 0; + background: #f8f9fa; +} + +.chat-container { + max-width: 800px; + margin: 0 auto; + background: white; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.chat-messages { + height: 500px; + overflow-y: auto; + padding: 2rem; + background: #f8f9fa; +} + +.message { + margin-bottom: 1.5rem; + max-width: 70%; +} + +.ai-message { + margin-right: auto; +} + +.user-message { + margin-left: auto; +} + +.message-content { + background: #e9ecef; + padding: 1rem 1.5rem; + border-radius: 18px; + line-height: 1.5; +} + +.user-message .message-content { + background: #667eea; + color: white; +} + +.chat-input { + display: flex; + gap: 1rem; + padding: 2rem; + border-top: 1px solid #dee2e6; +} + +.chat-input input { + flex: 1; + padding: 12px 16px; + border: 2px solid #dee2e6; + border-radius: 8px; + font-size: 1rem; + font-family: 'Noto Sans SC', sans-serif; +} + +.chat-input input:focus { + outline: none; + border-color: #667eea; +} + +.quick-actions { + display: flex; + gap: 1rem; + padding: 1rem 2rem; + background: #f8f9fa; + border-top: 1px solid #dee2e6; + flex-wrap: wrap; +} + +.stats { + padding: 80px 0; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + text-align: center; +} + +.stat-number { + font-size: 3rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.stat-label { + font-size: 1.1rem; + opacity: 0.9; +} + +.about { + padding: 80px 0; +} + +.about-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.about-text h3 { + font-size: 2rem; + margin-bottom: 1.5rem; + color: #667eea; +} + +.about-team { + display: flex; + gap: 2rem; + justify-content: center; +} + +.team-member { + font-size: 4rem; + animation: float 3s ease-in-out infinite; +} + +.team-member:nth-child(1) { animation-delay: 0s; } +.team-member:nth-child(2) { animation-delay: 0.5s; } +.team-member:nth-child(3) { animation-delay: 1s; } +.team-member:nth-child(4) { animation-delay: 1.5s; } + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-15px); } +} + +.footer { + background: #333; + color: white; + padding: 40px 0 20px; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-section h4 { + margin-bottom: 1rem; + color: #667eea; +} + +.footer-section a { + display: block; + color: #ccc; + text-decoration: none; + margin-bottom: 0.5rem; + transition: color 0.3s ease; +} + +.footer-section a:hover { + color: #667eea; +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + border-top: 1px solid #555; + color: #ccc; +} + +@media (max-width: 768px) { + .nav-menu { + gap: 1rem; + } + + .hero .container { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-title { + font-size: 2rem; + } + + .hero-buttons { + justify-content: center; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .about-content { + grid-template-columns: 1fr; + text-align: center; + } + + .chat-messages { + height: 400px; + } + + .quick-actions { + justify-content: center; + } +} +3. JavaScript文件 +// 响应数据库 +const aiResponses = { + "制定学习计划": "好的！让我为你制定一个个性化的学习计划。首先，请告诉我你的学习目标和可用时间。我会根据你的情况，为你设计一个科学、高效的学习路径。", + "推荐学习资源": "根据你的学习需求，我为你推荐以下优质资源：\n📚 在线课程平台：\n- Coursera：世界顶级大学课程\n- edX：MIT、哈佛等名校课程\n- 网易云课堂：国内优质课程\n\n📖 学习工具：\n- Anki：间隔重复记忆\n- Notion：知识管理\n- Forest：专注学习", + "解答疑问": "请告诉我你的问题，我会尽力为你解答。无论是知识点解释、概念理解还是学习方法，我都可以提供帮助。", + "你好": "你好！我是你的AI学习助手。请问我可以帮你什么？", + "学习方法": "有效的学习方法包括：\n1. 主动回忆：定期复习所学内容\n2. 间隔重复：根据遗忘曲线安排复习\n3. 费曼技巧：用简单的语言解释复杂概念\n4. 番茄工作法：25分钟专注+5分钟休息\n5. 思维导图：可视化知识结构", + "默认": "我不太理解你的问题。你可以尝试问我关于学习计划、资源推荐或学习方法的问题。" +}; + +// 发送消息 +function sendMessage() { + const userInput = document.getElementById('userInput'); + const message = userInput.value.trim(); + if (!message) return; + + // 添加用户消息 + addMessage(message, 'user'); + + // 获取AI响应 + const response = getAIResponse(message); + + // 模拟AI思考时间 + setTimeout(() => { + addMessage(response, 'ai'); + }, 1000); + + userInput.value = ''; +} + +// 添加消息到聊天界面 +function addMessage(content, sender) { + const chatMessages = document.getElementById('chatMessages'); + const messageDiv = document.createElement('div'); + messageDiv.className = `message ${sender}-message`; + + const contentDiv = document.createElement('div'); + contentDiv.className = 'message-content'; + + const p = document.createElement('p'); + p.textContent = content; + + contentDiv.appendChild(p); + messageDiv.appendChild(contentDiv); + chatMessages.appendChild(messageDiv); + + // 滚动到底部 + chatMessages.scrollTop = chatMessages.scrollHeight; +} + +// 获取AI响应 +function getAIResponse(message) { + for (const key in aiResponses) { + if (message.includes(key)) { + return aiResponses[key]; + } + } + return aiResponses["默认"]; +} + +// 快速操作 +function quickAction(action) { + const userInput = document.getElementById('userInput'); + userInput.value = action; + sendMessage(); +} + +// 处理回车键 +function handleKeyPress(event) { + if (event.key === 'Enter') { + sendMessage(); + } +} + +// 平滑滚动到指定区域 +function scrollToSection(sectionId) { + const section = document.getElementById(sectionId); + section.scrollIntoView({ behavior: 'smooth' }); +} + +// 数字动画 +function animateNumbers() { + const numbers = document.querySelectorAll('.stat-number'); + + numbers.forEach(number => { + const target = parseInt(number.getAttribute('data-target')); + const duration = 2000; + const step = target / (duration / 16); + let current = 0; + + const timer = setInterval(() => { + current += step; + if (current >= target) { + current = target; + clearInterval(timer); + } + number.textContent = current.toFixed(0); + }, 16); + }); +} + +// 视口检查 +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top <= (window.innerHeight || document.documentElement.clientHeight) && + rect.bottom >= 0 + ); +} + +// 滚动监听器 +window.addEventListener('scroll', () => { + const statsSection = document.querySelector('.stats'); + if (isInViewport(statsSection)) { + animateNumbers(); + window.removeEventListener('scroll', arguments.callee); + } +}); + +// 页面加载完成后执行 +window.addEventListener('load', () => { + // 初始化数字动画 + const statsSection = document.querySelector('.stats'); + if (isInViewport(statsSection)) { + animateNumbers(); + } +}); +4.README文件(README.md) +# AI辅助学习平台 + +## 📋 项目简介 + +AI辅助学习平台是一个基于现代Web技术开发的智能学习辅助系统，旨在利用人工智能技术为学习者提供个性化、高效率的学习体验。平台集成了智能推荐、个性化辅导、学习分析等多项核心功能，帮助用户提升学习效果。 + +## 🎯 项目特色 + +### 核心功能 +- **智能推荐系统**：基于学习进度和兴趣，AI智能推荐最适合的学习内容和路径 +- **24小时AI助教**：随时解答疑问，提供个性化学习建议 +- **学习数据分析**：深度分析学习数据，生成详细报告，帮助优化学习策略 +- **目标追踪管理**：设定学习目标，AI实时追踪进度，提供激励和提醒 +- **智能复习计划**：基于遗忘曲线，智能安排复习计划，巩固学习成果 +- **多语言支持**：支持多种语言学习，打破语言障碍 + +### 技术亮点 +- 响应式设计，完美适配各种设备 +- 现代化UI设计，渐变色彩搭配 +- 流畅的动画效果和交互体验 +- 实时AI对话功能 +- 数据可视化展示 + +## 🚀 快速开始 + +### 环境要求 +- 现代浏览器（Chrome、Firefox、Safari、Edge等） +- 无需额外依赖或安装 + +### 安装步骤 + +1. **克隆或下载项目** +```bash +git clone [项目地址] +cd ai-learning-platform +``` + +2. **直接打开** +- 双击 `index.html` 文件，在浏览器中打开 +- 或使用本地服务器（推荐） + +3. **使用本地服务器** +```bash +# 使用Python +python -m http.server 8000 + +# 使用Node.js (http-server) +npx http-server + +# 使用PHP +php -S localhost:8000 +``` + +4. **访问应用** +在浏览器中访问：`http://localhost:8000` + +## 📖 使用指南 + +### 主要功能使用 + +#### 1. 浏览首页 +- 查看平台介绍和核心价值 +- 点击"立即体验"按钮跳转到对话体验中心 +- 点击"了解更多"按钮查看功能特点 + +#### 2. 体验AI对话 +- 在对话体验中心输入你的问题 +- 使用快速操作按钮获取常用功能 +- AI助手会根据你的输入提供智能回复 + +#### 3. 查看功能特点 +- 滚动到功能特点区域 +- 查看六大核心功能的详细介绍 +- 鼠标悬停在卡片上查看动画效果 + +#### 4. 了解平台数据 +- 查看统计区域的实时数据 +- 数字会自动增长动画 +- 了解平台的规模和影响力 + +#### 5. 联系我们 +- 在页脚查看联系方式 +- 通过邮箱或电话与我们联系 + +## 🛠️ 技术栈 + +### 前端技术 +- **HTML5**：语义化标签，结构清晰 +- **CSS3**：现代CSS特性，包括Flexbox、Grid、动画等 +- **JavaScript (ES6+)**：原生JavaScript，无框架依赖 +- **Google Fonts**：Noto Sans SC中文字体 + +### 设计特点 +- **响应式设计**：适配桌面、平板、手机等设备 +- **渐变色彩**：紫色渐变主题，现代感十足 +- **动画效果**：流畅的过渡和交互动画 +- **卡片式布局**：清晰的信息层次结构 + +## 项目结构 + +```` #### 参与贡献