前端代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>課堂專注度分析系統 - 科技版</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet"><style>@keyframes gradientBG {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}@keyframes float {0% { transform: translateY(0px); }50% { transform: translateY(-10px); }100% { transform: translateY(0px); }}@keyframes pulse {0% { opacity: 0.2; }50% { opacity: 0.5; }100% { opacity: 0.2; }}.tech-bg {background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0c4a6e 100%);background-size: 400% 400%;animation: gradientBG 15s ease infinite;}.tech-card {background: rgba(15, 23, 42, 0.7);backdrop-filter: blur(10px);border: 1px solid rgba(56, 189, 248, 0.2);border-radius: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),0 0 20px rgba(56, 189, 248, 0.1) inset;transition: all 0.3s ease;}.tech-card:hover {transform: translateY(-5px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),0 0 30px rgba(56, 189, 248, 0.2) inset;border: 1px solid rgba(56, 189, 248, 0.4);}.tech-glow {text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);}.tech-border {border: 1px solid rgba(56, 189, 248, 0.3);}.grid-pattern {background-image:linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);background-size: 20px 20px;}.hud-element {position: relative;overflow: hidden;}.hud-element::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.8), transparent);animation: pulse 2s infinite;}.neon-text {color: #ffffff;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px rgba(56, 189, 248, 0.8),0 0 30px rgba(56, 189, 248, 0.6),0 0 40px rgba(56, 189, 248, 0.4);}.particles-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;overflow: hidden;}.particle {position: absolute;border-radius: 50%;background: rgba(56, 189, 248, 0.5);box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);animation: float 8s infinite ease-in-out;}</style>
</head>
<body class="tech-bg text-gray-200 min-h-screen flex flex-col font-['Exo_2']"><!-- 粒子背景 --><div id="particles-container" class="particles-container"></div><!-- 導航欄 --><nav class="bg-[#0f172a]/90 backdrop-blur-md shadow-lg sticky top-0 z-50 border-b border-sky-500/20"><div class="container mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between h-16"><div class="flex items-center"><div class="flex-shrink-0 flex items-center"><div class="w-10 h-10 rounded-full bg-sky-500/20 flex items-center justify-center mr-3 border border-sky-500/30"><i class="fa fa-brain text-sky-400 text-xl"></i></div><span class="text-xl font-bold text-white font-['Orbitron'] tracking-wide">NEURO<span class="text-sky-400">CLASS</span></span></div></div><div class="flex items-center space-x-3"><button class="p-2 rounded-md text-gray-400 hover:text-sky-300 focus:outline-none transition-colors group"><i class="fa fa-history group-hover:animate-pulse"></i></button><button class="p-2 rounded-md text-gray-400 hover:text-sky-300 focus:outline-none transition-colors group"><i class="fa fa-cog group-hover:animate-spin"></i></button><button class="p-2 rounded-md text-gray-400 hover:text-sky-300 focus:outline-none transition-colors group"><i class="fa fa-question-circle"></i></button><div class="h-8 w-8 rounded-full overflow-hidden border-2 border-sky-500"><div class="bg-gray-700 w-full h-full flex items-center justify-center"><i class="fa fa-user text-sm"></i></div></div></div></div></div></nav><!-- 主內容區 --><main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10"><!-- 歡迎信息 --><section class="mb-10 fade-in"><div class="flex items-center mb-4"><div class="h-1 w-12 bg-sky-500 mr-3"></div><h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-white font-['Orbitron'] tracking-wider">課堂專注度<span class="text-sky-400">分析系統</span></h1></div><p class="text-gray-400 max-w-3xl ml-16">基于神經網絡的AI分析引擎，實時識別學生專注度、情緒狀態和課堂參與度</p><div class="mt-8 tech-card p-5 max-w-3xl grid grid-cols-1 md:grid-cols-3 gap-4"><div class="flex items-center"><div class="w-12 h-12 rounded-full bg-sky-500/10 flex items-center justify-center mr-3 border border-sky-500/20"><i class="fa fa-bolt text-sky-400"></i></div><div><div class="text-sm text-gray-400">處理速度</div><div class="text-lg font-bold text-white">0.8秒/分鐘</div></div></div><div class="flex items-center"><div class="w-12 h-12 rounded-full bg-sky-500/10 flex items-center justify-center mr-3 border border-sky-500/20"><i class="fa fa-eye text-sky-400"></i></div><div><div class="text-sm text-gray-400">識別精度</div><div class="text-lg font-bold text-white">98.7%</div></div></div><div class="flex items-center"><div class="w-12 h-12 rounded-full bg-sky-500/10 flex items-center justify-center mr-3 border border-sky-500/20"><i class="fa fa-users text-sky-400"></i></div><div><div class="text-sm text-gray-400">支持規模</div><div class="text-lg font-bold text-white">50+學生</div></div></div></div></section><!-- 上傳區域 --><section class="mb-12"><div class="tech-card p-6 relative overflow-hidden"><div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-sky-500 to-transparent"></div><h2 class="text-xl font-semibold mb-4 flex items-center"><i class="fa fa-cloud-upload text-sky-400 mr-2"></i><span class="text-white">上傳課堂視頻</span></h2><div id="drop-area" class="tech-border rounded-xl p-8 text-center transition-all duration-200 cursor-pointer mb-6 relative grid-pattern"><input type="file" id="file-input" class="hidden" accept="video/mp4,video/avi,video/mov"><div class="mb-6 relative inline-block"><i class="fa fa-file-video-o text-5xl text-sky-400 mb-4"></i><div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-sky-500 flex items-center justify-center"><i class="fa fa-plus text-xs"></i></div></div><p class="text-gray-400 mb-4">拖放視頻文件到此處，或</p><button id="browse-btn" class="px-5 py-2.5 bg-gradient-to-r from-sky-500 to-blue-600 text-white rounded-lg hover:opacity-90 transition-opacity duration-200 shadow-lg shadow-sky-500/20 font-medium flex items-center mx-auto"><i class="fa fa-folder-open mr-2"></i> 瀏覽文件</button><p class="text-gray-500 text-sm mt-4">支持 MP4, AVI, MOV 格式 | 最大 2GB</p><div class="absolute inset-0 flex items-center justify-center hidden" id="drag-overlay"><div class="bg-sky-500/10 rounded-lg w-full h-full flex items-center justify-center"><i class="fa fa-cloud-upload text-sky-400 text-4xl animate-bounce"></i></div></div></div><!-- 上傳進度條 --><div id="upload-progress" class="hidden mb-4"><div class="flex items-center justify-between mb-3"><span class="text-sm text-gray-400">上傳進度</span><div class="flex items-center"><span id="progress-percentage" class="text-sm font-medium text-sky-400">0%</span><span class="text-xs text-gray-500 ml-2" id="time-estimate">預計剩余時間：計算中...</span></div></div><div class="w-full bg-gray-800 rounded-full h-2.5"><div id="progress-bar" class="h-2.5 rounded-full bg-gradient-to-r from-sky-400 to-blue-500" style="width: 0%"></div></div><div class="flex justify-between text-xs text-gray-500 mt-1"><span>開始上傳</span><span>傳輸中</span><span>完成</span></div></div><!-- 分析進度 --><div id="analysis-progress" class="hidden mb-6"><div class="tech-border rounded-xl p-5"><div class="flex items-center justify-between mb-3"><span class="font-medium text-gray-200">AI分析引擎啟動中...</span><span id="analysis-status" class="text-sm text-sky-400">準備中...</span></div><div class="w-full bg-gray-800 rounded-full h-2.5 mb-3"><div id="analysis-bar" class="h-2.5 rounded-full bg-gradient-to-r from-sky-400 to-blue-500" style="width: 0%"></div></div><div class="grid grid-cols-3 gap-2 text-xs"><div class="tech-border rounded p-2 text-center"><div class="text-sky-400 mb-1">面部識別</div><div class="h-1 w-full bg-gray-700 rounded"><div class="h-1 bg-sky-500 rounded" style="width: 30%"></div></div>
![華為OD-2024年E卷-字符串化繁為簡[200分] -- python](http://pic.xiahunao.cn/華為OD-2024年E卷-字符串化繁為簡[200分] -- python)
)
