+
+
+ {/* 把核心状态传给 Home 组件 */}
+ {activeTab === 'home' &&
}
+
+
+ {activeTab === 'achievement' &&
}
+ {activeTab === 'records' &&
}
+ {activeTab === 'customise' &&
}
+ {activeTab === 'help' &&
}
+
+ Customise
+
+
+ {/* Detection Settings */}
+
+
Detection Settings
+
+
Detection Sensitivity
+
+ {sensitivity}
+
+
Higher values require stricter focus criteria
+
+
+
Default Frame Rate
+
+ {frameRate} FPS
+
+
+
+
+ {/* Notifications */}
+
+
Notifications
+
+
+
+
+
+ Alert after (seconds)
+
+
+
+ {/* Data Management */}
+
+
Data Management
+
+ {/* 隐藏的文件输入框，只接受 json */}
+
+
+
+ {/* Export 按钮 */}
+
+ Export Data
+
+
+ {/* Import 按钮 */}
+
+ Import Data
+
+
+ {/* Clear 按钮 */}
+
+ Clear History
+
+
+
+
+
Save Settings
+
+ );
+}
+
+export default Customise;
diff --git a/src/components/FocusPage.jsx b/src/components/FocusPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e3aa2dfe50134015cb21d65b07a58d3564a9d9f
--- /dev/null
+++ b/src/components/FocusPage.jsx
@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from 'react';
+
+function FocusPage({ videoManager, sessionResult, setSessionResult, isActive, displayVideoRef }) {
+ const [currentFrame, setCurrentFrame] = useState(30);
+ const [timelineEvents, setTimelineEvents] = useState([]);
+
+ const videoRef = displayVideoRef;
+
+ // 辅助函数：格式化时间
+ const formatDuration = (seconds) => {
+ // 如果是 0，直接显示 0s (或者你可以保留原来的 0m 0s)
+ if (seconds === 0) return "0s";
+
+ const mins = Math.floor(seconds / 60);
+ const secs = Math.floor(seconds % 60);
+ return `${mins}m ${secs}s`;
+ };
+
+ useEffect(() => {
+ if (!videoManager) return;
+
+ // 设置回调函数来更新时间轴
+ const originalOnStatusUpdate = videoManager.callbacks.onStatusUpdate;
+ videoManager.callbacks.onStatusUpdate = (isFocused) => {
+ setTimelineEvents(prev => {
+ const newEvents = [...prev, { isFocused, timestamp: Date.now() }];
+ if (newEvents.length > 60) newEvents.shift();
+ return newEvents;
+ });
+ // 调用原始回调（如果有）
+ if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
+ };
+
+ // 清理函数：不再自动停止session，只清理回调
+ return () => {
+ if (videoManager) {
+ videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
+ }
+ };
+ }, [videoManager]);
+
+ const handleStart = async () => {
+ try {
+ if (videoManager) {
+ setSessionResult(null); // 开始时清除结果层
+ setTimelineEvents([]);
+
+ console.log('🎬 Initializing camera...');
+ await videoManager.initCamera(videoRef.current);
+ console.log('✅ Camera initialized');
+
+ console.log('🚀 Starting streaming...');
+ await videoManager.startStreaming();
+ console.log('✅ Streaming started successfully');
+ }
+ } catch (err) {
+ console.error('❌ Start error:', err);
+ let errorMessage = "Failed to start: ";
+
+ if (err.name === 'NotAllowedError') {
+ errorMessage += "Camera permission denied. Please allow camera access.";
+ } else if (err.name === 'NotFoundError') {
+ errorMessage += "No camera found. Please connect a camera.";
+ } else if (err.name === 'NotReadableError') {
+ errorMessage += "Camera is already in use by another application.";
+ } else if (err.message && err.message.includes('HTTPS')) {
+ errorMessage += "Camera requires HTTPS. Please use a secure connection.";
+ } else {
+ errorMessage += err.message || "Unknown error occurred.";
+ }
+
+ alert(errorMessage + "\n\nCheck browser console for details.");
+ }
+ };
+
+ const handleStop = () => {
+ if (videoManager) {
+ videoManager.stopStreaming();
+ }
+ };
+
+ const handlePiP = async () => {
+ try {
+ const sourceVideoEl = videoRef.current;
+ if (!sourceVideoEl) {
+ alert('Video not ready. Please click Start first.');
+ return;
+ }
+
+ if (document.pictureInPictureElement) {
+ await document.exitPictureInPicture();
+ return;
+ }
+
+ sourceVideoEl.disablePictureInPicture = false;
+
+ if (typeof sourceVideoEl.webkitSetPresentationMode === 'function') {
+ sourceVideoEl.play().catch(() => {});
+ sourceVideoEl.webkitSetPresentationMode('picture-in-picture');
+ return;
+ }
+
+ if (!document.pictureInPictureEnabled || typeof sourceVideoEl.requestPictureInPicture !== 'function') {
+ alert('Picture-in-Picture is not supported in this browser.');
+ return;
+ }
+
+ const pipPromise = sourceVideoEl.requestPictureInPicture();
+ sourceVideoEl.play().catch(() => {});
+ await pipPromise;
+ } catch (err) {
+ console.error('PiP error:', err);
+ alert('Failed to enter Picture-in-Picture.');
+ }
+ };
+
+ // 浮窗功能
+ const handleFloatingWindow = () => {
+ handlePiP();
+ };
+
+ // ==========================================
+ // 新增功能：预览按钮的处理函数
+ // ==========================================
+ const handlePreview = () => {
+ // 强制设置一个 0 分 0 秒的假数据，触发 overlay 显示
+ setSessionResult({
+ duration_seconds: 0,
+ focus_score: 0
+ });
+ };
+
+ const handleCloseOverlay = () => {
+ setSessionResult(null);
+ };
+ // ==========================================
+
+ const handleFrameChange = (val) => {
+ setCurrentFrame(val);
+ if (videoManager) {
+ videoManager.setFrameRate(val);
+ }
+ };
+
+ const pageStyle = isActive
+ ? undefined
+ : {
+ position: 'absolute',
+ width: '1px',
+ height: '1px',
+ overflow: 'hidden',
+ opacity: 0,
+ pointerEvents: 'none'
+ };
+
+ return (
+
+ FocusGuard
+ Your productivity monitor assistant.
+
+ {/* 🔪 把隐藏的上传框放在网格外面，绝对不让它占格子！ */}
+
+
+
+ Start Focus
+
+
+
+ Auto Import History
+
+
+ fileInputRef.current.click()}>
+ Manual Import History
+
+
+
+ {role === 'admin' ? 'Switch to User Mode' : 'Admin Login'}
+
+
+
+
+ );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Records.jsx b/src/components/Records.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c67f4d8f51182928b046c682a4fe6dc4d571cf2f
--- /dev/null
+++ b/src/components/Records.jsx
@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+function Records() {
+ const [filter, setFilter] = useState('all');
+ const [sessions, setSessions] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const chartRef = useRef(null);
+
+ // 格式化时间
+ const formatDuration = (seconds) => {
+ const mins = Math.floor(seconds / 60);
+ const secs = seconds % 60;
+ return `${mins}m ${secs}s`;
+ };
+
+ // 格式化日期
+ const formatDate = (dateString) => {
+ const date = new Date(dateString);
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ };
+
+ // 加载会话数据
+ const loadSessions = async (filterType) => {
+ setLoading(true);
+ try {
+ const response = await fetch(`/api/sessions?filter=${filterType}&limit=50`);
+ const data = await response.json();
+ setSessions(data);
+ drawChart(data);
+ } catch (error) {
+ console.error('Failed to load sessions:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // 绘制图表
+ const drawChart = (data) => {
+ const canvas = chartRef.current;
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width = canvas.offsetWidth;
+ const height = canvas.height = 300;
+
+ // 清空画布
+ ctx.clearRect(0, 0, width, height);
+
+ if (data.length === 0) {
+ ctx.fillStyle = '#999';
+ ctx.font = '16px Nunito';
+ ctx.textAlign = 'center';
+ ctx.fillText('No data available', width / 2, height / 2);
+ return;
+ }
+
+ // 准备数据 (最多显示最近20个会话)
+ const displayData = data.slice(0, 20).reverse();
+ const padding = 50;
+ const chartWidth = width - padding * 2;
+ const chartHeight = height - padding * 2;
+ const barWidth = chartWidth / displayData.length;
+
+ // 找到最大值用于缩放
+ const maxScore = 1.0;
+
+ // 绘制坐标轴
+ ctx.strokeStyle = '#E0E0E0';
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.moveTo(padding, padding);
+ ctx.lineTo(padding, height - padding);
+ ctx.lineTo(width - padding, height - padding);
+ ctx.stroke();
+
+ // 绘制Y轴刻度
+ ctx.fillStyle = '#666';
+ ctx.font = '12px Nunito';
+ ctx.textAlign = 'right';
+ for (let i = 0; i <= 4; i++) {
+ const y = height - padding - (chartHeight * i / 4);
+ const value = (maxScore * i / 4 * 100).toFixed(0);
+ ctx.fillText(value + '%', padding - 10, y + 4);
+
+ // 绘制网格线
+ ctx.strokeStyle = '#F0F0F0';
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.moveTo(padding, y);
+ ctx.lineTo(width - padding, y);
+ ctx.stroke();
+ }
+
+ // 绘制柱状图
+ displayData.forEach((session, index) => {
+ const barHeight = (session.focus_score / maxScore) * chartHeight;
+ const x = padding + index * barWidth + barWidth * 0.1;
+ const y = height - padding - barHeight;
+ const barActualWidth = barWidth * 0.8;
+
+ // 根据分数设置颜色 - 使用蓝色主题
+ const score = session.focus_score;
+ let color;
+ if (score >= 0.8) color = '#4A90E2';
+ else if (score >= 0.6) color = '#5DADE2';
+ else if (score >= 0.4) color = '#85C1E9';
+ else color = '#AED6F1';
+
+ ctx.fillStyle = color;
+ ctx.fillRect(x, y, barActualWidth, barHeight);
+
+ // 绘制边框
+ ctx.strokeStyle = color;
+ ctx.lineWidth = 1;
+ ctx.strokeRect(x, y, barActualWidth, barHeight);
+ });
+
+ // 绘制图例
+ ctx.textAlign = 'left';
+ ctx.font = 'bold 14px Nunito';
+ ctx.fillStyle = '#4A90E2';
+ ctx.fillText('Focus Score by Session', padding, 30);
+ };
+
+ // 初始加载
+ useEffect(() => {
+ loadSessions(filter);
+ }, [filter]);
+
+ // 处理筛选按钮点击
+ const handleFilterClick = (filterType) => {
+ setFilter(filterType);
+ };
+
+ // 查看详情
+ const handleViewDetails = (sessionId) => {
+ // 这里可以实现查看详情的功能，比如弹窗显示该会话的详细信息
+ alert(`View details for session ${sessionId}\n(Feature can be extended later)`);
+ };
+
+ return (
+
+ My Records
+
+
+ handleFilterClick('today')}
+ style={{
+ padding: '10px 30px',
+ borderRadius: '8px',
+ border: filter === 'today' ? 'none' : '2px solid #4A90E2',
+ background: filter === 'today' ? '#4A90E2' : 'transparent',
+ color: filter === 'today' ? 'white' : '#4A90E2',
+ fontSize: '14px',
+ fontWeight: '500',
+ cursor: 'pointer',
+ transition: 'all 0.3s'
+ }}
+ >
+ Today
+
+ handleFilterClick('week')}
+ style={{
+ padding: '10px 30px',
+ borderRadius: '8px',
+ border: filter === 'week' ? 'none' : '2px solid #4A90E2',
+ background: filter === 'week' ? '#4A90E2' : 'transparent',
+ color: filter === 'week' ? 'white' : '#4A90E2',
+ fontSize: '14px',
+ fontWeight: '500',
+ cursor: 'pointer',
+ transition: 'all 0.3s'
+ }}
+ >
+ This Week
+
+ handleFilterClick('month')}
+ style={{
+ padding: '10px 30px',
+ borderRadius: '8px',
+ border: filter === 'month' ? 'none' : '2px solid #4A90E2',
+ background: filter === 'month' ? '#4A90E2' : 'transparent',
+ color: filter === 'month' ? 'white' : '#4A90E2',
+ fontSize: '14px',
+ fontWeight: '500',
+ cursor: 'pointer',
+ transition: 'all 0.3s'
+ }}
+ >
+ This Month
+
+ handleFilterClick('all')}
+ style={{
+ padding: '10px 30px',
+ borderRadius: '8px',
+ border: filter === 'all' ? 'none' : '2px solid #4A90E2',
+ background: filter === 'all' ? '#4A90E2' : 'transparent',
+ color: filter === 'all' ? 'white' : '#4A90E2',
+ fontSize: '14px',
+ fontWeight: '500',
+ cursor: 'pointer',
+ transition: 'all 0.3s'
+ }}
+ >
+ All Time
+
+
+
+
+
+
+
+
Recent Sessions
+ {loading ? (
+
+ Loading sessions...
+
+ ) : sessions.length === 0 ? (
+
+ No sessions found for this period.
+
+ ) : (
+
+
+
+ Date
+ Duration
+ Focus Score
+ Action
+
+
+
+ {sessions.map((session, index) => (
+
+ {formatDate(session.start_time)}
+ {formatDuration(session.duration_seconds)}
+
+ = 0.8
+ ? '#28a745'
+ : session.focus_score >= 0.6
+ ? '#ffc107'
+ : session.focus_score >= 0.4
+ ? '#fd7e14'
+ : '#dc3545',
+ fontWeight: '600',
+ fontSize: '13px'
+ }}
+ >
+ {(session.focus_score * 100).toFixed(1)}%
+
+
+
+ handleViewDetails(session.id)}
+ style={{
+ padding: '6px 20px',
+ background: '#4A90E2',
+ border: 'none',
+ color: 'white',
+ borderRadius: '6px',
+ cursor: 'pointer',
+ fontSize: '12px',
+ fontWeight: '500',
+ transition: 'background 0.3s'
+ }}
+ onMouseOver={(e) => e.target.style.background = '#357ABD'}
+ onMouseOut={(e) => e.target.style.background = '#4A90E2'}
+ >
+ View
+
+
+
+ ))}
+
+
+ )}
+
+ );
+}
+
+export default Records;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ca727baa471177072244562a5891a13e566ded7a
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,73 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+
+button:hover {
+ border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+
+ a:hover {
+ color: #747bff;
+ }
+
+ button {
+ background-color: #f9f9f9;
+ }
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b9a1a6deac8775b5598874b2bc3c7971d82cf211
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+