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> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-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-indigo-600"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Homework Hero</h1> | |
| </div> | |
| <button id="addChildBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="mr-1"></i> 添加孩子 | |
| </button> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Children List --> | |
| <section id="childrenList" class="mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i data-feather="users" class="mr-2 text-indigo-600"></i> 我的孩子们 | |
| </h2> | |
| <div id="childrenContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Child cards will be dynamically added here --> | |
| <div class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center justify-center border-2 border-dashed border-gray-300"> | |
| <i data-feather="user-plus" class="text-gray-400 mb-3" style="width: 48px; height: 48px;"></i> | |
| <p class="text-gray-500 mb-4">添加第一个孩子开始远程辅导</p> | |
| <button id="addChildCardBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="mr-1"></i> 添加孩子 | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Active Session Section --> | |
| <section id="activeSession" class="hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i data-feather="monitor" class="mr-2 text-indigo-600"></i> 实时辅导会话 | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 bg-indigo-600 text-white flex justify-between items-center"> | |
| <h3 id="sessionChildName" class="text-lg font-semibold">正在辅导: 小明</h3> | |
| <button id="endSessionBtn" class="bg-red-500 hover:bg-red-600 px-3 py-1 rounded-lg flex items-center"> | |
| <i data-feather="x" class="mr-1"></i> 结束会话 | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4"> | |
| <!-- Desktop View --> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-3 py-2 flex items-center"> | |
| <i data-feather="monitor" class="mr-2"></i> | |
| <span>桌面视角</span> | |
| </div> | |
| <div class="bg-gray-200 h-64 flex items-center justify-center"> | |
| <img src="http://static.photos/workspace/640x360/123" alt="桌面视角" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <!-- Child Face View --> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-3 py-2 flex items-center"> | |
| <i data-feather="camera" class="mr-2"></i> | |
| <span>孩子正面</span> | |
| </div> | |
| <div class="bg-gray-200 h-64 flex items-center justify-center"> | |
| <img src="http://static.photos/people/640x360/456" alt="孩子正面" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Help Request --> | |
| <div class="p-4 border-t"> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="help-circle" class="text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-yellow-800">孩子请求帮助</h3> | |
| <div class="mt-2 text-sm text-yellow-700"> | |
| <p>小明在数学题上遇到了困难，需要你的帮助。</p> | |
| </div> | |
| <div class="mt-3 flex space-x-3"> | |
| <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| <i data-feather="pen-tool" class="mr-1"></i> 白板讲解 | |
| </button> | |
| <button class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| <i data-feather="cpu" class="mr-1"></i> AI解答 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Add Child Modal --> | |
| <div id="addChildModal" 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="closeModalBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-gray-600 mb-4">请让孩子打开Homework Hero应用，生成二维码后在此扫描：</p> | |
| <div id="qrcodeContainer" class="flex justify-center my-4"> | |
| <div id="qrcode" class="bg-gray-100 p-4 rounded-lg border border-gray-300"></div> | |
| </div> | |
| <p class="text-center text-sm text-gray-500 mt-2">扫描此二维码连接到孩子的设备</p> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelAddBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| 取消 | |
| </button> | |
| <button id="simulateScanBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| 模拟扫描 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Sample children data | |
| let children = [ | |
| { | |
| id: 1, | |
| name: "小明", | |
| status: "online", | |
| lastActive: "刚刚" | |
| }, | |
| { | |
| id: 2, | |
| name: "小红", | |
| status: "away", | |
| lastActive: "5分钟前" | |
| } | |
| ]; | |
| // DOM Elements | |
| const addChildBtn = document.getElementById('addChildBtn'); | |
| const addChildCardBtn = document.getElementById('addChildCardBtn'); | |
| const addChildModal = document.getElementById('addChildModal'); | |
| const closeModalBtn = document.getElementById('closeModalBtn'); | |
| const cancelAddBtn = document.getElementById('cancelAddBtn'); | |
| const simulateScanBtn = document.getElementById('simulateScanBtn'); | |
| const childrenContainer = document.getElementById('childrenContainer'); | |
| const activeSession = document.getElementById('activeSession'); | |
| const sessionChildName = document.getElementById('sessionChildName'); | |
| const endSessionBtn = document.getElementById('endSessionBtn'); | |
| // Generate QR Code | |
| function generateQRCode() { | |
| const qrcodeDiv = document.getElementById('qrcode'); | |
| qrcodeDiv.innerHTML = ''; | |
| new QRCode(qrcodeDiv, { | |
| text: "https://homeworkhero.app/connect/parent/abc123", | |
| width: 128, | |
| height: 128, | |
| colorDark: "#000000", | |
| colorLight: "#ffffff", | |
| correctLevel: QRCode.CorrectLevel.H | |
| }); | |
| } | |
| // Render children list | |
| function renderChildren() { | |
| childrenContainer.innerHTML = ''; | |
| children.forEach(child => { | |
| const childCard = document.createElement('div'); | |
| childCard.className = 'bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer'; | |
| childCard.innerHTML = ` | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">${child.name}</h3> | |
| <p class="text-sm text-gray-500">最后活跃: ${child.lastActive}</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${ | |
| child.status === 'online' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' | |
| }"> | |
| ${child.status === 'online' ? '在线' : '离开'} | |
| </span> | |
| </div> | |
| <div class="mt-4 flex space-x-3"> | |
| <button class="start-session-btn flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-3 rounded-lg text-sm flex items-center justify-center" data-id="${child.id}"> | |
| <i data-feather="monitor" class="mr-1"></i> 开始辅导 | |
| </button> | |
| <button class="remove-child-btn bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-3 rounded-lg"> | |
| <i data-feather="trash-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| childrenContainer.appendChild(childCard); | |
| }); | |
| // Add empty card if no children | |
| if (children.length === 0) { | |
| childrenContainer.innerHTML = ` | |
| <div class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center justify-center border-2 border-dashed border-gray-300"> | |
| <i data-feather="user-plus" class="text-gray-400 mb-3" style="width: 48px; height: 48px;"></i> | |
| <p class="text-gray-500 mb-4">添加第一个孩子开始远程辅导</p> | |
| <button id="addChildCardBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="mr-1"></i> 添加孩子 | |
| </button> | |
| </div> | |
| `; | |
| document.getElementById('addChildCardBtn').addEventListener('click', () => { | |
| addChildModal.classList.remove('hidden'); | |
| generateQRCode(); | |
| }); | |
| } | |
| // Re-initialize feather icons | |
| feather.replace(); | |
| // Add event listeners | |
| document.querySelectorAll('.start-session-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const childId = e.currentTarget.getAttribute('data-id'); | |
| const child = children.find(c => c.id == childId); | |
| startSession(child); | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-child-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const childCard = e.currentTarget.closest('.rounded-xl'); | |
| childCard.style.animation = 'fadeOut 0.3s forwards'; | |
| setTimeout(() => { | |
| childCard.remove(); | |
| // In a real app, you would remove from children array and update state | |
| }, 300); | |
| }); | |
| }); | |
| } | |
| // Start session with child | |
| function startSession(child) { | |
| sessionChildName.textContent = `正在辅导: ${child.name}`; | |
| activeSession.classList.remove('hidden'); | |
| window.scrollTo({ | |
| top: activeSession.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Event Listeners | |
| addChildBtn.addEventListener('click', () => { | |
| addChildModal.classList.remove('hidden'); | |
| generateQRCode(); | |
| }); | |
| closeModalBtn.addEventListener('click', () => { | |
| addChildModal.classList.add('hidden'); | |
| }); | |
| cancelAddBtn.addEventListener('click', () => { | |
| addChildModal.classList.add('hidden'); | |
| }); | |
| simulateScanBtn.addEventListener('click', () => { | |
| // Simulate adding a new child | |
| const newChild = { | |
| id: children.length + 1, | |
| name: `孩子${children.length + 1}`, | |
| status: "online", | |
| lastActive: "刚刚" | |
| }; | |
| children.push(newChild); | |
| renderChildren(); | |
| addChildModal.classList.add('hidden'); | |
| // Show success message | |
| alert(`成功添加 ${newChild.name}!`); | |
| }); | |
| endSessionBtn.addEventListener('click', () => { | |
| activeSession.classList.add('hidden'); | |
| }); | |
| // Initial render | |
| renderChildren(); | |
| // Add fadeOut animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeOut { | |
| from { opacity: 1; transform: translateY(0); } | |
| to { opacity: 0; transform: translateY(-20px); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </script> | |
| </body> | |
| </html> | |