200 lines
6.6 KiB
HTML
200 lines
6.6 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/courseHome.css" />
|
|
<link rel="stylesheet" href="../css/certificateBase64.css" />
|
|
<link rel="stylesheet" href="../css/userDisplay.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- start -->
|
|
<!-- 导航条 -->
|
|
<div class="container-header">
|
|
<div class="container-header-logo">
|
|
<img src="../asset/logo.png" alt="logo" />
|
|
</div>
|
|
<nav class="container-header-nav">
|
|
<div data-url="indexHome">首页</div>
|
|
<div data-url="indexDetail">导航</div>
|
|
<div class="active" data-url="courseHome">课程</div>
|
|
<div data-url="student_analytics">数据分析</div>
|
|
|
|
<div class="barrierFree" data-url="courseHomeBarrierFree">
|
|
无障碍化
|
|
</div>
|
|
</nav>
|
|
<div id="userDisplay" class="user-display"></div>
|
|
</div>
|
|
|
|
<!-- 课程模块 -->
|
|
<div class="container-main">
|
|
<!-- 列表 -->
|
|
<div class="container-main-sidebar">
|
|
<ul class="directory-list"></ul>
|
|
</div>
|
|
<div class="sidebar-circle">◀</div>
|
|
|
|
<!-- 课程 -->
|
|
<div class="container-main-course">
|
|
<div class="course-box">
|
|
<!-- 视频播放器 -->
|
|
<div class="box-video">
|
|
<video id="mainVideo" controls type="video/mp4" src=""></video>
|
|
</div>
|
|
|
|
<!-- 游戏容器 -->
|
|
<div class="box-play" style="display: none">
|
|
<iframe id="mainPlay" src=""></iframe>
|
|
</div>
|
|
|
|
<!-- 按钮容器 none / flex -->
|
|
<div class="box-btn" style="display: none">
|
|
<button
|
|
class="box-btn-left"
|
|
onclick="logicManage(event)"
|
|
onmouseenter="debouncedSpeechDomText(event)"
|
|
></button>
|
|
<div
|
|
class="box-btn-question"
|
|
onmouseenter="debouncedSpeechDomText(event)"
|
|
></div>
|
|
<button
|
|
class="box-btn-right"
|
|
onclick="logicManage(event)"
|
|
onmouseenter="debouncedSpeechDomText(event)"
|
|
></button>
|
|
</div>
|
|
|
|
<!-- 提示容器 -->
|
|
<div class="box-notice" style="display: none">
|
|
<div class="box-notice-text">
|
|
<!-- --- 提示内容 --- -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 体感容器 -->
|
|
<div class="box-body" style="display: none">
|
|
<div id="bodyConnectionStatus">未连接到服务器</div>
|
|
<img id="bodyVideoFeed" src="" alt="体感检测视频" />
|
|
<div id="bodyHandStatus">等待检测...</div>
|
|
</div>
|
|
|
|
<!-- 语音容器 -->
|
|
<div class="box-speech" style="display: none">
|
|
<div class="box-speech-status" id="speechStatus">
|
|
正在连接到语音识别服务...
|
|
</div>
|
|
|
|
<div class="box-speech-text">
|
|
<div id="speechPartialResult" class="box-speech-partial"></div>
|
|
</div>
|
|
|
|
<div class="box-speech-button">
|
|
<button id="speechStartButton" class="speech-action-button">
|
|
开始识别
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 证书容器 -->
|
|
<div
|
|
class="box-certificate"
|
|
onclick="exportCertificate()"
|
|
style="display: none"
|
|
>
|
|
<div class="box-certificate-name">
|
|
感谢
|
|
<span><!-- 融光小学三年级二班 小王同学 --></span>
|
|
为本节课程提供素材。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作栏 -->
|
|
<div class="course-circle" onclick="showOperationDom()">⚙️</div>
|
|
<!-- 操作栏 具体按钮 -->
|
|
<div class="course-operation">
|
|
<!-- 🎧 📢 🔇 -->
|
|
<div title="语音播报" onclick="setIsAudio(event)">📢</div>
|
|
<div title="语音识别" onclick="showSpeech()">🎧</div>
|
|
<div title="体感交互" onclick="showBody()">🦾</div>
|
|
<div title="鸣谢证书" onclick="showCertificate()">🏆</div>
|
|
</div>
|
|
|
|
<!-- 语音播报的空间，在页面上隐藏 -->
|
|
<audio
|
|
id="audioPlayer"
|
|
controls
|
|
style="position: absolute; bottom: -60px"
|
|
src=""
|
|
></audio>
|
|
</div>
|
|
|
|
<!-- end -->
|
|
</div>
|
|
</body>
|
|
|
|
<!-- Jq引入 -->
|
|
<script src="../js/jquery-3.7.1.min.js"></script>
|
|
<!-- 整体配置数据 -->
|
|
<script src="../js/courseConfig.js"></script>
|
|
<!-- 整体默认样式 -->
|
|
<script src="../js/courseHomeStyle.js"></script>
|
|
<!-- 视频播放及视频交互 -->
|
|
<script src="../js/interactionVideo.js"></script>
|
|
<!-- 语音播报 -->
|
|
<script src="../js/voiceBroadcast.js"></script>
|
|
<!-- 体感检测 -->
|
|
<script src="../js/directBodySensation.js"></script>
|
|
<!-- 语音检测 -->
|
|
<script src="../js/speech/crypto-js.js"></script>
|
|
<script src="../js/dist/index.umd.js"></script>
|
|
<script src="../js/speechSensation.js"></script>
|
|
<!-- 证书导出 及依赖 -->
|
|
<script src="../js/html2canvas.min.js"></script>
|
|
<script src="../js/exportCertificate.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("DOMContentLoaded", async function () {
|
|
try {
|
|
// 初始化用户管理器
|
|
await window.userManager.init();
|
|
window.userManager.createUserDisplay();
|
|
|
|
// 初始化数据管理器
|
|
await window.dataManager.init();
|
|
|
|
console.log("后端集成初始化完成");
|
|
} catch (error) {
|
|
console.error("后端集成初始化失败:", error);
|
|
}
|
|
});
|
|
|
|
// 页面离开时保存数据
|
|
window.addEventListener("beforeunload", function () {
|
|
if (window.endAccess) {
|
|
window.endAccess();
|
|
}
|
|
});
|
|
|
|
// 页面隐藏时保存数据
|
|
document.addEventListener("visibilitychange", function () {
|
|
if (document.hidden && window.endAccess) {
|
|
window.endAccess();
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|