Skip to content

Commit 8b70dab

Browse files
Jacob000-0Jacob000-0
authored
新增番茄时钟-新增首页弹窗跳转到番茄时钟
1 parent 80d570e commit 8b70dab

File tree

6 files changed

+601
-2
lines changed

6 files changed

+601
-2
lines changed

‎index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,17 @@ <h2 class="section-title">Latest Posts</h2>
7070

7171
</div>
7272

73+
<!-- 新增番茄时钟弹窗功能 -->
74+
<div id="welcome-modal" class="modal-overlay">
75+
<div class="modal-content">
76+
<h3>你要使用番茄时钟吗？</h3>
77+
<div class="modal-actions">
78+
<button id="cancel-btn" class="modal-btn">取消</button>
79+
<button id="confirm-btn" class="modal-btn">确认 (跳转)</button>
80+
</div>
81+
</div>
82+
</div>
83+
7384
<!-- 引入 JS -->
7485
<script src="static/js/main.js"></script>
7586
</body>

‎pomodoro-timer.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>专注番茄时钟 PWA</title>
7+
<link rel="stylesheet" href="/static/css/pomodoro-timer.css">
8+
<link rel="manifest" href="/manifest.json">
9+
</head>
10+
<body data-theme="light">
11+
<div id="app">
12+
<header>
13+
<h1>专注番茄时钟</h1>
14+
<div id="header-controls">
15+
<button id="theme-toggle" title="切换主题">🎨</button>
16+
<button id="settings-toggle" title="设置">⚙️</button>
17+
<button id="focus-mode-toggle" title="专注模式">🔒</button>
18+
</div>
19+
</header>
20+
21+
<main>
22+
<div id="timer-wrapper">
23+
<!-- <div id="session-tabs">
24+
<button data-session="work" class="active">工作</button>
25+
<button data-session="shortBreak">短休息</button>
26+
<button data-session="longBreak">长休息</button>
27+
</div> -->
28+
<div id="session-tabs">
29+
<button data-session="work" class="active">工作</button>
30+
<button data-session="shortBreak">短休息</button>
31+
<button data-session="longBreak">长休息</button>
32+
</div>
33+
34+
<div id="timer-display">
35+
<svg class="progress-ring" width="300" height="300">
36+
<circle class="progress-ring-bg" stroke="#e6e6e6" stroke-width="12" fill="transparent" r="144" cx="150" cy="150"/>
37+
<circle id="progress-indicator" class="progress-ring-indicator" stroke="var(--accent-color)" stroke-width="12" fill="transparent" r="144" cx="150" cy="150" transform="rotate(-90 150 150)"/>
38+
</svg>
39+
<div id="time-left">25:00</div>
40+
</div>
41+
42+
<div id="controls">
43+
<button id="start-pause-btn" class="control-btn">开始 (Space)</button>
44+
<button id="reset-btn" class="control-btn">重置 (R)</button>
45+
<button id="skip-btn" class="control-btn">跳过 (S)</button>
46+
</div>
47+
</div>
48+
49+
<div id="task-panel" class="card">
50+
<h2>📚 任务清单</h2>
51+
<div id="task-input-group">
52+
<input type="text" id="task-input" placeholder="添加任务并关联番茄时间...">
53+
<button id="add-task-btn">+</button>
54+
</div>
55+
<ul id="tasks"></ul>
56+
</div>
57+
</main>
58+
59+
<section id="settings-panel" class="hidden card">
60+
<h2>⚙️ 定时器设置</h2>
61+
<button id="save-settings-btn">保存</button>
62+
</section>
63+
64+
<section id="stats-panel" class="card">
65+
<h2>📈 效率统计</h2>
66+
<p>已完成番茄周期: <span id="pomodoros-count">0</span></p>
67+
<canvas id="daily-chart"></canvas>
68+
<canvas id="weekly-chart"></canvas>
69+
</section>
70+
</div>
71+
72+
<div id="focus-overlay" class="hidden">
73+
<p>专注模式激活中... 远离分心!</p>
74+
</div>
75+
76+
<script src="/static/js/pomodoro-timer.js"></script>
77+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
78+
<script>
79+
if ('serviceWorker' in navigator) {
80+
window.addEventListener('load', () => {
81+
navigator.serviceWorker.register('/sw.js').then(registration => {
82+
console.log('SW registered: ', registration);
83+
}).catch(registrationError => {
84+
console.log('SW registration failed: ', registrationError);
85+
});
86+
});
87+
}
88+
</script>
89+
</body>
90+
</html>

‎static/css/index.css‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,4 +198,80 @@ a:focus-visible {
198198
#hero-section h1 {
199199
font-size: 2rem;
200200
}
201-
}
201+
}
202+
203+
/* 番茄时钟样式 */
204+
/* 模态弹窗的背景（半透明黑色） */
205+
.modal-overlay {
206+
position: fixed;
207+
top: 0;
208+
left: 0;
209+
width: 100%;
210+
height: 100%;
211+
background-color: rgba(0, 0, 0, 0.6);
212+
display: flex;
213+
justify-content: center;
214+
align-items: center;
215+
z-index: 1000;
216+
}
217+
218+
/* 弹窗内容容器 */
219+
.modal-content {
220+
background-color: #ffffff;
221+
padding: 30px;
222+
border-radius: 12px;
223+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
224+
text-align: center;
225+
max-width: 400px;
226+
width: 90%;
227+
animation: fadeIn 0.3s ease-out;
228+
}
229+
230+
/* 动画效果 */
231+
@keyframes fadeIn {
232+
from { opacity: 0; transform: scale(0.9); }
233+
to { opacity: 1; transform: scale(1); }
234+
}
235+
236+
/* 提示文字 */
237+
.modal-content h3 {
238+
margin-top: 0;
239+
color: #333;
240+
font-size: 1.4em;
241+
margin-bottom: 25px;
242+
}
243+
244+
/* 按钮容器 */
245+
.modal-actions {
246+
display: flex;
247+
justify-content: space-around;
248+
margin-top: 20px;
249+
}
250+
251+
/* 按钮样式 */
252+
.modal-btn {
253+
padding: 10px 25px;
254+
border: none;
255+
border-radius: 6px;
256+
font-size: 1em;
257+
cursor: pointer;
258+
transition: background-color 0.2s, transform 0.1s;
259+
}
260+
261+
/* 取消按钮 */
262+
#cancel-btn {
263+
background-color: #e0e0e0;
264+
color: #555;
265+
}
266+
#cancel-btn:hover {
267+
background-color: #d0d0d0;
268+
}
269+
270+
/* 确认按钮（跳转） */
271+
#confirm-btn {
272+
background-color: #4CAF50; /* 绿色 */
273+
color: white;
274+
}
275+
#confirm-btn:hover {
276+
background-color: #45a049;
277+
}

‎static/css/pomodoro-timer.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* style.css */
2+
3+
/* --- 基础变量和主题 --- */
4+
:root {
5+
--primary-bg: #f5f7fa;
6+
--card-bg: #ffffff;
7+
--text-color: #333333;
8+
--accent-color: #4CAF50; /* 工作 - 绿色 */
9+
--break-color: #2196F3; /* 休息 - 蓝色 */
10+
--shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
11+
--font-family: 'Segoe UI', Arial, sans-serif;
12+
}
13+
14+
[data-theme="dark"] {
15+
--primary-bg: #1e1e2f;
16+
--card-bg: #27293d;
17+
--text-color: #e0e0e0;
18+
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
19+
}
20+
21+
/* --- 布局和通用样式 --- */
22+
body {
23+
font-family: var(--font-family);
24+
background-color: var(--primary-bg);
25+
color: var(--text-color);
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
min-height: 100vh;
30+
transition: background-color 0.3s, color 0.3s;
31+
}
32+
33+
.card {
34+
background-color: var(--card-bg);
35+
padding: 25px;
36+
border-radius: 15px;
37+
box-shadow: var(--shadow);
38+
margin: 20px 0;
39+
width: 100%;
40+
}
41+
42+
/* --- 定时器显示和环形进度条 --- */
43+
#timer-wrapper {
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
justify-content: center;
48+
padding: 40px;
49+
background-color: var(--card-bg);
50+
border-radius: 20px;
51+
box-shadow: var(--shadow);
52+
}
53+
54+
#timer-display {
55+
position: relative;
56+
width: 300px;
57+
height: 300px;
58+
margin: 20px 0;
59+
}
60+
61+
#time-left {
62+
position: absolute;
63+
top: 50%;
64+
left: 50%;
65+
transform: translate(-50%, -50%);
66+
font-size: 5em;
67+
font-weight: 700;
68+
z-index: 10;
69+
}
70+
71+
/* SVG 环形进度条样式 */
72+
.progress-ring-bg {
73+
stroke: #e6e6e6; /* 背景环颜色 */
74+
transition: stroke 0.3s;
75+
}
76+
77+
.progress-ring-indicator {
78+
transition: stroke 0.3s, stroke-dashoffset 1s linear; /* 动画的关键 */
79+
/* r=144, 2*pi*r = 904.77 */
80+
stroke-dasharray: 904.77;
81+
stroke-dashoffset: 904.77; /* 初始时隐藏 */
82+
}
83+
84+
/* 按钮和控件 (Start/Pause) */
85+
.control-btn {
86+
padding: 12px 30px;
87+
font-size: 1.2em;
88+
border-radius: 30px;
89+
background-color: var(--accent-color);
90+
color: white;
91+
font-weight: 600;
92+
margin: 0 10px;
93+
transition: background-color 0.2s, transform 0.1s;
94+
border: none;
95+
cursor: pointer;
96+
}
97+
.control-btn:hover {
98+
filter: brightness(110%);
99+
transform: scale(1.02);
100+
}
101+
102+
/* 专注模式叠加层 */
103+
#focus-overlay {
104+
position: fixed;
105+
top: 0;
106+
left: 0;
107+
width: 100%;
108+
height: 100%;
109+
background-color: rgba(0, 0, 0, 0.95);
110+
color: white;
111+
display: flex;
112+
justify-content: center;
113+
align-items: center;
114+
font-size: 2em;
115+
z-index: 1000;
116+
text-align: center;
117+
}
118+
.hidden {
119+
display: none !important;
120+
}
121+
122+
/* 任务列表样式 (省略细节) */
123+
/* ... */

‎static/js/main.js‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// 添加简体时间
12
document.addEventListener('DOMContentLoaded', () => {
23

34
// 1. 自动更新 Footer 年份
@@ -56,4 +57,34 @@ document.addEventListener('DOMContentLoaded', () => {
5657
postListContainer.appendChild(article);
5758
});
5859
}
59-
});
60+
61+
62+
// 弹窗--跳转到 番茄时钟
63+
const modal = document.getElementById('welcome-modal');
64+
const confirmBtn = document.getElementById('confirm-btn');
65+
const cancelBtn = document.getElementById('cancel-btn');
66+
67+
// 假设您的番茄时钟页面文件名为 pomodoro-timer.html
68+
const targetUrl = 'pomodoro-timer.html';
69+
70+
// 确认按钮：跳转到番茄时钟页面
71+
confirmBtn.addEventListener('click', () => {
72+
window.location.href = targetUrl;
73+
});
74+
75+
// 取消按钮：关闭弹窗
76+
cancelBtn.addEventListener('click', () => {
77+
modal.style.display = 'none';
78+
// 如果需要，可以在这里让页面主体内容可见
79+
});
80+
81+
// 可选：点击背景也关闭弹窗
82+
modal.addEventListener('click', (e) => {
83+
if (e.target === modal) {
84+
modal.style.display = 'none';
85+
}
86+
});
87+
88+
// 默认情况下，在页面加载完成时显示弹窗 (CSS 默认设置为可见)
89+
});
90+

0 commit comments

Comments
 (0)