|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Pomodoro Pro - 专注番茄钟</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
.task-item:hover .task-actions { |
|
|
opacity: 1; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<h1 class="text-3xl font-bold text-indigo-700 flex items-center"> |
|
|
<i class="fas fa-clock mr-2"></i> Pomodoro Pro |
|
|
</h1> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="statsBtn" class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition"> |
|
|
<i class="fas fa-chart-bar mr-2"></i>统计 |
|
|
</button> |
|
|
<button id="settingsBtn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i class="fas fa-cog mr-2"></i>设置 |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold">专注计时器</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="shortBreakBtn" class="px-3 py-1 text-sm bg-gray-100 rounded hover:bg-gray-200">短休息</button> |
|
|
<button id="longBreakBtn" class="px-3 py-1 text-sm bg-gray-100 rounded hover:bg-gray-200">长休息</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="relative w-64 h-64 mb-6"> |
|
|
<svg class="w-full h-full" viewBox="0 0 100 100"> |
|
|
<circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
|
|
<circle id="progressCircle" class="progress-ring__circle text-indigo-500" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center flex-col"> |
|
|
<div id="timeDisplay" class="text-4xl font-bold">25:00</div> |
|
|
<div id="timerState" class="text-gray-500 mt-2">准备开始</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<button id="startBtn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i>开始 |
|
|
</button> |
|
|
<button id="pauseBtn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition flex items-center hidden"> |
|
|
<i class="fas fa-pause mr-2"></i>暂停 |
|
|
</button> |
|
|
<button id="resetBtn" class="px-6 py-3 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition flex items-center"> |
|
|
<i class="fas fa-redo mr-2"></i>重置 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">任务列表</h2> |
|
|
<button id="addTaskBtn" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm flex items-center"> |
|
|
<i class="fas fa-plus mr-1"></i> 添加任务 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="taskInputContainer" class="mb-4 hidden"> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" id="taskInput" placeholder="输入任务内容..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button id="saveTaskBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">保存</button> |
|
|
<button id="cancelTaskBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">取消</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="taskList" class="space-y-2"> |
|
|
|
|
|
<div class="text-center py-4 text-gray-500" id="emptyTaskMessage"> |
|
|
暂无任务，点击"添加任务"按钮开始 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">今日摘要</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-gray-600">已完成番茄钟</div> |
|
|
<div class="font-semibold"><span id="todayCompleted">0</span>个</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-gray-600">专注时间</div> |
|
|
<div class="font-semibold"><span id="todayFocusTime">0</span>分钟</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-gray-600">完成任务</div> |
|
|
<div class="font-semibold"><span id="todayTasksCompleted">0</span>个</div> |
|
|
</div> |
|
|
<div class="pt-4 border-t border-gray-100"> |
|
|
<div class="text-gray-600 mb-2">今日效率</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="todayEfficiencyBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<div class="text-right text-sm text-gray-500 mt-1"><span id="todayEfficiency">0</span>%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">本周趋势</h2> |
|
|
<canvas id="weeklyChart" height="200"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">最佳专注时段</h2> |
|
|
<canvas id="bestTimeChart" height="200"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="statsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-indigo-700">详细统计</h2> |
|
|
<button id="closeStatsModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold text-indigo-800 mb-2">总专注时间</h3> |
|
|
<div class="text-3xl font-bold text-indigo-600"><span id="totalFocusTime">0</span>小时</div> |
|
|
<div class="text-sm text-indigo-500 mt-1">自<span id="statsStartDate">2023年1月1日</span>以来</div> |
|
|
</div> |
|
|
<div class="bg-green-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold text-green-800 mb-2">完成任务</h3> |
|
|
<div class="text-3xl font-bold text-green-600"><span id="totalTasksCompleted">0</span>个</div> |
|
|
<div class="text-sm text-green-500 mt-1">平均每天<span id="avgTasksPerDay">0</span>个</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-4">月度趋势</h3> |
|
|
<canvas id="monthlyChart" height="300"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">任务类型分布</h3> |
|
|
<canvas id="taskTypeChart" height="250"></canvas> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">专注时段分布</h3> |
|
|
<canvas id="focusTimeDistributionChart" height="250"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-indigo-700">设置</h2> |
|
|
<button id="closeSettingsModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<h3 class="font-semibold mb-3">计时器设置</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label for="focusTime" class="text-gray-700">专注时间 (分钟)</label> |
|
|
<input type="number" id="focusTime" min="1" max="60" value="25" class="w-20 px-3 py-2 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label for="shortBreakTime" class="text-gray-700">短休息 (分钟)</label> |
|
|
<input type="number" id="shortBreakTime" min="1" max="30" value="5" class="w-20 px-3 py-2 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label for="longBreakTime" class="text-gray-700">长休息 (分钟)</label> |
|
|
<input type="number" id="longBreakTime" min="1" max="60" value="15" class="w-20 px-3 py-2 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label for="longBreakInterval" class="text-gray-700">长休息间隔 (番茄钟)</label> |
|
|
<input type="number" id="longBreakInterval" min="1" max="10" value="4" class="w-20 px-3 py-2 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-semibold mb-3">通知设置</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="enableSound" class="mr-2" checked> |
|
|
<label for="enableSound">启用提示音</label> |
|
|
|
|
|
</html> |
