Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Homework Hero - 孩子端</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-green-50 to-teal-100 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="book-open" class="text-teal-600"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Homework Hero</h1> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <span id="connectionStatus" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| <i data-feather="wifi" class="mr-1"></i> 已连接 | |
| </span> | |
| <button id="helpBtn" class="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="help-circle" class="mr-1"></i> 求助 | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Camera Views --> | |
| <section class="mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i data-feather="camera" class="mr-2 text-teal-600"></i> 作业监控 | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Desktop Camera --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="monitor" class="mr-2"></i> | |
| <span class="font-medium">桌面视角</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/workspace/640x360/789" alt="桌面视角" class="w-full h-64 object-cover"> | |
| <div class="absolute bottom-3 left-3 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm"> | |
| <i data-feather="video" class="mr-1"></i> 录制中 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Face Camera --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="mr-2"></i> | |
| <span class="font-medium">我的正面</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/640x360/321" alt="我的正面" class="w-full h-64 object-cover"> | |
| <div class="absolute bottom-3 left-3 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm"> | |
| <i data-feather="video" class="mr-1"></i> 录制中 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Help Request Section --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i data-feather="help-circle" class="mr-2 text-amber-500"></i> 请求帮助 | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <button id="screenshotHelp" class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 flex flex-col items-center"> | |
| <i data-feather="camera" class="text-amber-500 mb-2" style="width: 24px; height: 24px;"></i> | |
| <span class="font-medium text-gray-700">截图求助</span> | |
| <p class="text-sm text-gray-500 mt-1 text-center">截取当前屏幕向家长求助</p> | |
| </button> | |
| <button id="voiceHelp" class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 flex flex-col items-center"> | |
| <i data-feather="mic" class="text-amber-500 mb-2" style="width: 24px; height: 24px;"></i> | |
| <span class="font-medium text-gray-700">语音求助</span> | |
| <p class="text-sm text-gray-500 mt-1 text-center">录制语音说明问题</p> | |
| </button> | |
| <button id="whiteboardHelp" class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 flex flex-col items-center"> | |
| <i data-feather="pen-tool" class="text-amber-500 mb-2" style="width: 24px; height: 24px;"></i> | |
| <span class="font-medium text-gray-700">白板求助</span> | |
| <p class="text-sm text-gray-500 mt-1 text-center">使用白板与家长互动</p> | |
| </button> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-200"> | |
| <h3 class="font-medium text-gray-700 mb-3">最近求助记录</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 bg-amber-50 rounded-lg"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3"></i> | |
| <div class="flex-1"> | |
| <p class="font-medium text-gray-800">数学题求助</p> | |
| <p class="text-sm text-gray-600">今天 15:30 • 已解决</p> | |
| </div> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i data-feather="refresh-cw"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center p-3 bg-amber-50 rounded-lg"> | |
| <i data-feather="clock" class="text-amber-500 mr-3"></i> | |
| <div class="flex-1"> | |
| <p class="font-medium text-gray-800">英语阅读理解</p> | |
| <p class="text-sm text-gray-600">今天 14:45 • 等待回复</p> | |
| </div> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Help Modal --> | |
| <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl w-11/12 max-w-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">发送求助请求</h3> | |
| <button id="closeHelpModal" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">描述你的问题</label> | |
| <textarea id="problemDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="简单描述一下你遇到的问题..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">附加信息</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i data-feather="upload" class="w-8 h-8 mb-2 text-gray-500"></i> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">点击上传</span> 或拖拽文件</p> | |
| <p class="text-xs text-gray-500">PNG, JPG, GIF (MAX. 10MB)</p> | |
| </div> | |
| <input id="dropzone-file" type="file" class="hidden" /> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelHelpBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| 取消 | |
| </button> | |
| <button id="sendHelpBtn" class="px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600"> | |
| 发送求助 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // DOM Elements | |
| const helpBtn = document.getElementById('helpBtn'); | |
| const helpModal = document.getElementById('helpModal'); | |
| const closeHelpModal = document.getElementById('closeHelpModal'); | |
| const cancelHelpBtn = document.getElementById('cancelHelpBtn'); | |
| const sendHelpBtn = document.getElementById('sendHelpBtn'); | |
| const screenshotHelp = document.getElementById('screenshotHelp'); | |
| const voiceHelp = document.getElementById('voiceHelp'); | |
| const whiteboardHelp = document.getElementById('whiteboardHelp'); | |
| // Event Listeners | |
| helpBtn.addEventListener('click', () => { | |
| helpModal.classList.remove('hidden'); | |
| }); | |
| closeHelpModal.addEventListener('click', () => { | |
| helpModal.classList.add('hidden'); | |
| }); | |
| cancelHelpBtn.addEventListener('click', () => { | |
| helpModal.classList.add('hidden'); | |
| }); | |
| sendHelpBtn.addEventListener('click', () => { | |
| // Simulate sending help request | |
| alert('求助请求已发送给家长！'); | |
| helpModal.classList.add('hidden'); | |
| }); | |
| // Quick help buttons | |
| screenshotHelp.addEventListener('click', () => { | |
| alert('正在截取屏幕...'); | |
| }); | |
| voiceHelp.addEventListener('click', () => { | |
| alert('开始录音，请说出你的问题...'); | |
| }); | |
| whiteboardHelp.addEventListener('click', () => { | |
| alert('正在启动白板...'); | |
| }); | |
| // Simulate connection status change | |
| setInterval(() => { | |
| const status = document.getElementById('connectionStatus'); | |
| if (Math.random() > 0.95) { | |
| status.innerHTML = '<i data-feather="wifi-off" class="mr-1"></i> 连接断开'; | |
| status.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800'; | |
| } else { | |
| status.innerHTML = '<i data-feather="wifi" class="mr-1"></i> 已连接'; | |
| status.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800'; | |
| } | |
| feather.replace(); | |
| }, 5000); | |
| </script> | |
| </body> | |
| </html> | |