463 lines
17 KiB
HTML
463 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>融光课堂 - 首页</title>
|
|
<link rel="stylesheet" href="../css/indexHome.css" />
|
|
<link href="../css/css2.css" rel="stylesheet" />
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="../css/animate.min.css" />
|
|
<link rel="stylesheet" href="../css/chat.css" />
|
|
<link rel="stylesheet" href="../css/userDisplay.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-header">
|
|
<div class="container-header-logo">
|
|
<img src="../asset/logo.png" alt="logo" />
|
|
</div>
|
|
<nav class="container-header-nav">
|
|
<div class="active" data-url="indexHome">首页</div>
|
|
<div data-url="indexDetail">导航</div>
|
|
<div data-url="courseHome">课程</div>
|
|
<div data-url="student_analytics">数据分析</div>
|
|
<div data-url="ai_game_generator">AI游戏生成器</div>
|
|
<div data-url="ai_storytelling">AI讲故事</div>
|
|
</nav>
|
|
<div id="userDisplay" class="user-display"></div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="page page-1">
|
|
<section class="carousel-section">
|
|
<div id="carousel" class="carousel">
|
|
<!-- 轮播项1 -->
|
|
<div class="carousel-item active">
|
|
<img src="https://edu.iflytek.com/Public/Uploads/uploadfile/images/20240716/19.jpg" />
|
|
<!-- <div class="content">
|
|
<div class="container">
|
|
<div>
|
|
<h1>探索自然之美</h1>
|
|
<p>感受大自然的壮丽与宁静，发现地球最美丽的角落。从雄伟的山脉到湛蓝的海洋，每一处风景都值得被铭记。</p>
|
|
<div class="buttons">
|
|
<button class="primary">立即探索</button>
|
|
<button class="secondary">了解更多</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- 轮播项2 -->
|
|
<div class="carousel-item">
|
|
<img src="https://picsum.photos/id/1015/1920/1080" alt="宁静湖泊与山脉" />
|
|
<div class="content">
|
|
<div class="container">
|
|
<div>
|
|
<h1>宁静的湖泊</h1>
|
|
<p>
|
|
在平静的湖面上，山脉倒映出完美的镜像。这里是心灵的避风港，让您远离城市喧嚣，找回内心的宁静。
|
|
</p>
|
|
<div class="buttons">
|
|
<button class="primary">立即探索</button>
|
|
<button class="secondary">了解更多</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 轮播项3 -->
|
|
<div class="carousel-item">
|
|
<img src="https://picsum.photos/id/1039/1920/1080" alt="美丽的森林" />
|
|
<div class="content">
|
|
<div class="container">
|
|
<div>
|
|
<h1>森林秘境</h1>
|
|
<p>
|
|
踏入这片神秘的森林，探索自然的奥秘。每一棵树都有自己的故事，每一片叶子都在诉说生命的奇迹。
|
|
</p>
|
|
<div class="buttons">
|
|
<button class="primary">立即探索</button>
|
|
<button class="secondary">了解更多</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 轮播控制 -->
|
|
<div class="carousel-controls">
|
|
<button id="prev-btn">
|
|
<i class="fa fa-angle-left"></i>
|
|
</button>
|
|
|
|
<div class="carousel-indicators">
|
|
<button class="carousel-indicator active" data-index="0"></button>
|
|
<button class="carousel-indicator" data-index="1"></button>
|
|
<button class="carousel-indicator" data-index="2"></button>
|
|
</div>
|
|
|
|
<button id="next-btn">
|
|
<i class="fa fa-angle-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 向下滚动按钮 -->
|
|
<div class="scroll-down">
|
|
<a href="#features">
|
|
<i class="fa fa-angle-down"></i>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="page page-2">
|
|
<div class="home-hero-block">
|
|
<div class="home-hero-center">
|
|
<div class="home-hero-title-row">
|
|
<span class="home-hero-icon"></span>
|
|
<!-- <span class="home-hero-title">欢迎来到融光课堂</span> -->
|
|
<img src="../asset/编组 17.png" alt="欢迎来到融光课堂" class="welcome-image" />
|
|
</div>
|
|
<div class="home-hero-subtitle-row">
|
|
<span class="home-hero-subtitle">让学习变得更有趣、互动和高效</span>
|
|
<span class="home-hero-star"></span>
|
|
</div>
|
|
<div class="home-hero-btns">
|
|
<a href="#" class="btn btn-primary">开始学习</a>
|
|
<a href="#" class="btn btn-secondary">了解更多</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-extra-elements">
|
|
<div class="elliptical-shape">
|
|
<img src="../asset/编组 3.png" alt="Elliptical Shape Image" />
|
|
</div>
|
|
<div class="rounded-rectangle-badge">三大核心课程</div>
|
|
</div>
|
|
<div class="home-hero-images">
|
|
<img src="../asset/编组 11.png" alt="Decorative Image 1" class="hero-image-1" />
|
|
<img src="../asset/椭圆形.png" alt="Decorative Image 2" class="hero-image-2" />
|
|
</div>
|
|
</div>
|
|
<div class="home-modules-row">
|
|
<div class="home-module home-module-chinese">
|
|
<div class="home-module-label">语文</div>
|
|
<div class="home-module-desc">皓月明辉，文字之美</div>
|
|
<div class="home-module-avatar-placeholder"></div>
|
|
<div class="home-module-bgword">
|
|
<img src="../asset/永.png" alt="永" />
|
|
</div>
|
|
<div class="home-module-arrow">↗</div>
|
|
<!-- <img class="home-module-avatar" src="../images/avatar-chinese.png" alt="avatar" /> -->
|
|
</div>
|
|
<div class="home-module home-module-life">
|
|
<div class="home-module-label">生活</div>
|
|
<!-- <div class="home-module-avatar-placeholder"></div> -->
|
|
<img src="../asset/圆形.png" alt="生活模块装饰圆形" class="home-module-avatar-placeholder" />
|
|
<div class="home-module-desc">旭日东升，生活之趣</div>
|
|
<!-- <img class="home-module-avatar" src="../images/avatar-life.png" alt="avatar" /> -->
|
|
<div class="home-module-arrow">↗</div>
|
|
</div>
|
|
<div class="home-module home-module-math">
|
|
<div class="home-module-label">数学</div>
|
|
<div class="home-module-desc">流星划过，数学之妙</div>
|
|
<!-- <div class="home-module-avatar-placeholder"></div> -->
|
|
<div class="home-module-bgword">
|
|
<img src="../asset/数学.png" alt="数学" />
|
|
</div>
|
|
<div class="home-module-arrow">↗</div>
|
|
<!-- <img class="home-module-avatar" src="../images/avatar-math.png" alt="avatar" /> -->
|
|
</div>
|
|
</div>
|
|
<div class="home-footer-bar">
|
|
<div class="footer-repeating-content">
|
|
<div class="footer-section">
|
|
<img src="../asset/blue_start.png" alt="star icon" class="footer-star-icon" />
|
|
<span class="footer-text"><strong>融光课堂</strong> 让学习变得更有趣、互动和高效</span>
|
|
</div>
|
|
<div class="footer-section">
|
|
<img src="../asset/orgen_start.png" alt="star icon" class="footer-star-icon" />
|
|
<span class="footer-text"><strong>融光课堂</strong> 让学习变得更有趣、互动和高效</span>
|
|
</div>
|
|
<div class="footer-section">
|
|
<img src="../asset/zi_start.png" alt="star icon" class="footer-star-icon" />
|
|
<span class="footer-text"><strong>融光课堂</strong> 让学习变得更有趣、互动和高效</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page page-3">
|
|
<div class="feature-container">
|
|
<div class="feature-image">
|
|
<!-- <div class="feature-bg feature-bg-pink"></div> -->
|
|
<img src="../asset/编组 23.png" alt="语音交互" />
|
|
<!-- <div class="feature-overlay">
|
|
<div class="overlay-icon">🎤</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="feature-text">
|
|
<h2>语音交互</h2>
|
|
<p>通过语音指令，轻松学习，让学习变得更加有趣！</p>
|
|
<ul class="feature-list">
|
|
<li>智能语音识别技术</li>
|
|
<li>自然语言处理</li>
|
|
<li>实时语音反馈</li>
|
|
</ul>
|
|
<a href="#" class="feature-link">体验语音交互 <span class="arrow">↗</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="feature-container">
|
|
<div class="feature-text">
|
|
<h2>视频交互</h2>
|
|
<p>生动的视频教学，让知识更加直观，学习更加高效！</p>
|
|
<ul class="feature-list">
|
|
<li>高清教学视频</li>
|
|
<li>互动式视频问答</li>
|
|
<li>个性化视频推荐</li>
|
|
</ul>
|
|
<a href="#" class="feature-link">探索视频课程 <span class="arrow">↗</span></a>
|
|
</div>
|
|
<div class="feature-image">
|
|
<!-- <div class="feature-bg feature-bg-pink"></div> -->
|
|
<img src="../asset/编组 24.png" alt="视频交互" />
|
|
<!-- <div class="feature-overlay">
|
|
<div class="overlay-icon">🎬</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page page-4">
|
|
<div class="feature-container">
|
|
<div class="feature-image">
|
|
<!-- <div class="feature-bg feature-bg-pink"></div> -->
|
|
<img src="../asset/编组 25.png" alt="体感交互" />
|
|
<!-- <div class="feature-overlay">
|
|
<div class="overlay-icon">🏃</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="feature-text">
|
|
<h2>体感交互</h2>
|
|
<p>动起来学习，让身体和大脑一起成长！</p>
|
|
<ul class="feature-list">
|
|
<li>体感游戏学习</li>
|
|
<li>动作识别技术</li>
|
|
<li>健康运动监测</li>
|
|
</ul>
|
|
<a href="#" class="feature-link">开始体感学习 <span class="arrow">↗</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="feature-container">
|
|
<div class="feature-text">
|
|
<h2>智能交互</h2>
|
|
<p>智能学习助手，为每个孩子定制专属学习计划！</p>
|
|
<ul class="feature-list">
|
|
<li>AI学习路径规划</li>
|
|
<li>智能错题分析</li>
|
|
<li>学习进度追踪</li>
|
|
</ul>
|
|
<a href="#" class="feature-link">获取智能助手 <span class="arrow">↗</span></a>
|
|
</div>
|
|
<div class="feature-image">
|
|
<!-- <div class="feature-bg feature-bg-pink"></div> -->
|
|
<img src="../asset/编组 26.png" alt="智能交互" />
|
|
<!-- <div class="feature-overlay">
|
|
<div class="overlay-icon">🤖</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-col">
|
|
<h3>
|
|
<span><i class="fa fa-cube"></i></span>
|
|
融光课堂
|
|
</h3>
|
|
<p>通过高质量的视觉内容，带领您探索世界各地的美丽风景和文化。</p>
|
|
<!-- <div class="social-links">
|
|
<a href="#">
|
|
<i class="fa fa-facebook"></i>
|
|
</a>
|
|
<a href="#">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
<a href="#">
|
|
<i class="fa fa-instagram"></i>
|
|
</a>
|
|
<a href="#">
|
|
<i class="fa fa-youtube-play"></i>
|
|
</a>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h4>快速链接</h4>
|
|
<ul>
|
|
<li><a href="#">首页</a></li>
|
|
<li><a href="#features">导航</a></li>
|
|
<li><a href="#about">课程</a></li>
|
|
<li><a href="#contact">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h4>友情链接</h4>
|
|
<ul>
|
|
<li><a href="#">讯飞智慧教育</a></li>
|
|
<li><a href="#">博思智慧学习平台</a></li>
|
|
<li><a href="#">人才呀学习平台</a></li>
|
|
<li><a href="#">南美洲</a></li>
|
|
<li><a href="#">非洲</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h4>联系信息</h4>
|
|
<ul class="footer-contact">
|
|
<li>
|
|
<i class="fa fa-map-marker"></i>
|
|
<span>合肥市蜀山区科大讯飞股份有限公司</span>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-phone"></i>
|
|
<span>18895603013</span>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-envelope"></i>
|
|
<span>jywang52@iflytek.com</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2025 融光课堂. 保留所有权利.</p>
|
|
<div class="footer-links">
|
|
<a href="#">隐私政策</a>
|
|
<a href="#">服务条款</a>
|
|
<a href="#">Cookie 政策</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 聊天图标 -->
|
|
<div class="chat-icon-container" id="chatIcon">
|
|
<div class="chat-icon bubble-pulse">
|
|
<!-- <i class="fa fa-comments"></i> -->
|
|
<img src="../asset/xh1.png" width="50px" height="60px" alt="" />
|
|
</div>
|
|
<!-- <div class="notification-badge active">1</div> -->
|
|
</div>
|
|
|
|
<!-- 聊天对话框 -->
|
|
<div class="chat-dialog" id="chatDialog">
|
|
<div class="chat-header">
|
|
<div class="chat-title">智能对话助手</div>
|
|
<audio id="chatAudio" src=""></audio>
|
|
<div class="close-chat" id="closeChat">×</div>
|
|
</div>
|
|
<div class="chat-content">
|
|
<!-- 小人动画 -->
|
|
<!-- <div class="avatar-animation">
|
|
<div class="avatar">
|
|
<div class="head">
|
|
<div class="eye left"></div>
|
|
<div class="eye right"></div>
|
|
<div class="mouth"></div>
|
|
</div>
|
|
<div class="body"></div>
|
|
<div class="arm left"></div>
|
|
<div class="arm right"></div>
|
|
<div class="leg left"></div>
|
|
<div class="leg right"></div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<!-- 欢迎消息 -->
|
|
<div class="message bot">
|
|
<div class="message-content">
|
|
你好！我是智能对话助手，有什么可以帮助你的吗？
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 语音输入提示 -->
|
|
<div class="message bot">
|
|
<div class="message-content">
|
|
你可以点击下方麦克风按钮，通过语音与我交流。
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 语音识别状态 -->
|
|
<div class="voice-status" id="voiceStatus"></div>
|
|
</div>
|
|
<div class="chat-footer">
|
|
<!-- 语音输入按钮 -->
|
|
<div class="voice-input-container">
|
|
<div class="voice-input-btn" id="voiceInputBtn">
|
|
<i class="fa fa-microphone"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../js/jquery-3.7.1.min.js"></script>
|
|
<script src="../js/indexHome.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
|
|
<!-- 物理（？？） -->
|
|
<script src="../js/physics.js"></script>
|
|
<script src="../js/speech/crypto-js.js"></script>
|
|
<script src="../js/dist/index.umd.js"></script>
|
|
<script src="../js/chat.js"></script>
|
|
<!-- 新增的后端集成脚本 -->
|
|
<script src="../js/apiService.js"></script>
|
|
<script src="../js/dataManager.js"></script>
|
|
<script src="../js/userManager.js"></script>
|
|
<script src="../js/accessTracker.js"></script>
|
|
<script src="../js/gameTracker.js"></script>
|
|
<script>
|
|
// 默认滚轮
|
|
// document.addEventListener('wheel', function (e) {
|
|
// e.preventDefault();
|
|
// }, { passive: false });
|
|
|
|
(function (win) {
|
|
// 初始化样式和方法
|
|
|
|
// 1、导航条切换
|
|
$(".container-header-nav > div").each(function (index) {
|
|
$(this).on("click", function () {
|
|
$(".container-header-nav > div").removeClass("active");
|
|
$(this).addClass("active");
|
|
window.open(`./${$(this).data("url")}.html`);
|
|
|
|
// console.log("this", this, $(this));
|
|
// $(".container-header-nav > div").eq(index).addClass("active");
|
|
});
|
|
});
|
|
})(window);
|
|
|
|
// 初始化后端集成
|
|
document.addEventListener("DOMContentLoaded", async function () {
|
|
try {
|
|
// 初始化用户管理器
|
|
await window.userManager.init();
|
|
window.userManager.createUserDisplay();
|
|
|
|
// 初始化数据管理器
|
|
await window.dataManager.init();
|
|
|
|
console.log("后端集成初始化完成");
|
|
} catch (error) {
|
|
console.error("后端集成初始化失败:", error);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |