1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>番茄钟 - η空间</class="tag">title>
4<class="tag">meta name="description" content="在线番茄钟计时器。class="number">25分钟专注工作，class="number">5分钟休息。纯浏览器本地运行。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh}
9.container{max-width:420px;margin:class="number">0 auto;padding:40px 16px;text-align:center}
10h1{font-size:24px;margin-bottom:8px}
11h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
12.desc{color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:13px;margin-bottom:30px}
13.timer-circle{position:relative;width:260px;height:260px;margin:class="number">0 auto 20px}
14.timer-circle svg{transform:rotate(-90deg)}
15.timer-circle .bg{fill:none;stroke:class=class="string">"keyword">class=class="string">"comment">#class="number">222;stroke-width:class="number">8}
16.timer-circle .progress{fill:none;stroke:class=class="string">"keyword">class=class="string">"comment">#FF6B35;stroke-width:class="number">8;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
17.timer-text{position:absolute;top:class="number">50%;left:class="number">50%;transform:translate(-class="number">50%,-class="number">50%);text-align:center}
18.timer-text .time{font-size:48px;font-weight:class="number">700;font-family:class="string">'JetBrains Mono',monospace;letter-spacing:2px}
19.timer-text .label{font-size:14px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;margin-top:4px}
20.timer-text .label.work{color:class=class="string">"keyword">class=class="string">"comment">#4ade80}
21.timer-text .label.class=class="string">"keyword">break{color:class=class="string">"keyword">class=class="string">"comment">#60a5fa}
22.btn-group{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
23.btn{padding:10px 24px;border:none;border-radius:10px;font-size:14px;font-weight:class="number">600;cursor:pointer;transition:all .3s}
24.btn-start{background:class=class="string">"keyword">class=class="string">"comment">#4ade80;color:#class="number">000}
25.btn-start:hover{background:class=class="string">"keyword">class=class="string">"comment">#34d399}
26.btn-pause{background:class=class="string">"keyword">class=class="string">"comment">#fb923c;color:#class="number">000}
27.btn-pause:hover{background:class=class="string">"keyword">class=class="string">"comment">#f97316}
28.btn-reset{background:transparent;border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">333;color:#ccc}
29.btn-reset:hover{border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#FF6B35}
30.status-bar{font-size:13px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;margin-bottom:4px}
31.status-bar .dot{display:inline-block;width:8px;height:8px;border-radius:class="number">50%;margin-right:4px}
32.status-bar .dot.work{background:class=class="string">"keyword">class=class="string">"comment">#4ade80}
33.status-bar .dot.class=class="string">"keyword">break{background:class=class="string">"keyword">class=class="string">"comment">#60a5fa}
34</class="tag">style></class="tag">head><class="tag">body>
35<class="tag">div class=class="string">"keyword">class="container">
36<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">🍅</class="tag">span> 番茄钟</class="tag">h1>
37<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">🍅 class="number">25分钟专注 → class="number">5分钟休息 · 循环往复 · 科学摸鱼</class="tag">p>
38<class="tag">p class=class="string">"keyword">class="desc">class="number">25分钟专注 · class="number">5分钟休息 · 科学摆烂</class="tag">p>
39<class="tag">div class=class="string">"keyword">class="timer-circle">
40<class="tag">svg width="class="number">260" height="class="number">260">
41<class="tag">circle class=class="string">"keyword">class="bg" cx="class="number">130" cy="class="number">130" r="class="number">115"/>
42<class="tag">circle class=class="string">"keyword">class="progress" id="progress" cx="class="number">130" cy="class="number">130" r="class="number">115" stroke-dasharray="class="number">722.57" stroke-dashoffset="class="number">0"/>
43</class="tag">svg>
44<class="tag">div class=class="string">"keyword">class="timer-text">
45<class="tag">div class=class="string">"keyword">class="time" id="timerDisplay">class="number">25:class="number">00</class="tag">div>
46<class="tag">div class=class="string">"keyword">class="label work" id="statusLabel">工作中</class="tag">div>
47</class="tag">div>
48</class="tag">div>
49<class="tag">div class=class="string">"keyword">class="btn-group">
50<class="tag">button class=class="string">"keyword">class="btn btn-start" id="startBtn" onclick="toggleTimer()">▶ 开始</class="tag">button>
51<class="tag">button class=class="string">"keyword">class="btn btn-reset" onclick="resetTimer()">↺ 重置</class="tag">button>
52</class="tag">div>
53<class="tag">div class=class="string">"keyword">class="status-bar"><class="tag">span class=class="string">"keyword">class="dot work" id="statusDot"></class="tag">span> <class="tag">span id="statusText">准备开始</class="tag">span></class="tag">div>
54</class="tag">div>
55<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
56<class="tag">script>
57class=class="string">"keyword">var workTime=class="number">25*class="number">60,breakTime=class="number">5*class="number">60;
58class=class="string">"keyword">var timeLeft=workTime,isWork=true,isRunning=false;
59class=class="string">"keyword">var timer=null,circumference=class="number">722.57;
60class=class="string">"keyword">function updateDisplay(){
61 class=class="string">"keyword">var m=Math.floor(timeLeft/class="number">60),s=timeLeft%class="number">60;
62 document.class="func">getElementById(class="string">'timerDisplay').textContent=class="func">String(m).padStart(class="number">2,class="string">'class="number">0')+class="string">':'+class="func">String(s).padStart(class="number">2,class="string">'class="number">0');
63 class=class="string">"keyword">var progress=isWork?timeLeft/workTime:timeLeft/breakTime;
64 document.class="func">getElementById(class="string">'progress').style.strokeDashoffset=circumference*(class="number">1-progress);
65}
66class=class="string">"keyword">function updateStatus(){
67 class=class="string">"keyword">var label=document.class="func">getElementById(class="string">'statusLabel');
68 class=class="string">"keyword">var dot=document.class="func">getElementById(class="string">'statusDot');
69 class=class="string">"keyword">var txt=document.class="func">getElementById(class="string">'statusText');
70 class=class="string">"keyword">if(isWork){
71 label.textContent=class="string">'工作中';label.className=class="string">'label work';
72 dot.className=class="string">'dot work';
73 txt.textContent=class="string">'专注时间，别摸鱼!';
74 }class=class="string">"keyword">else{
75 label.textContent=class="string">'休息中';label.className=class="string">'label class="keyword">break';
76 dot.className=class="string">'dot class="keyword">break';
77 txt.textContent=class="string">'休息一下，喝口水';
78 }
79}
80class=class="string">"keyword">function beep(){
81 try{
82 class=class="string">"keyword">var ctx=class=class="string">"keyword">new(window.AudioContext||window.webkitAudioContext)();
83 class=class="string">"keyword">var o=ctx.createOscillator();class=class="string">"keyword">var g=ctx.createGain();
84 o.connect(g);g.connect(ctx.destination);
85 o.frequency.value=class="number">800;g.gain.value=class="number">0.3;
86 o.start();g.gain.exponentialRampToValueAtTime(class="number">0.01,ctx.currentTime+class="number">0.5);
87 o.stop(ctx.currentTime+class="number">0.5);
88 class="func">setTimeout(class=class="string">"keyword">function(){
89 class=class="string">"keyword">var o2=ctx.createOscillator();class=class="string">"keyword">var g2=ctx.createGain();
90 o2.connect(g2);g2.connect(ctx.destination);
91 o2.frequency.value=class="number">1000;g2.gain.value=class="number">0.3;
92 o2.start();g2.gain.exponentialRampToValueAtTime(class="number">0.01,ctx.currentTime+class="number">0.5);
93 o2.stop(ctx.currentTime+class="number">0.5);
94 },class="number">600);
95 }class="func">catch(e){}
96}
97class=class="string">"keyword">function toggleTimer(){
98 class=class="string">"keyword">if(isRunning){
99 clearInterval(timer);isRunning=false;
100 document.class="func">getElementById(class="string">'startBtn').textContent=class="string">'▶ 继续';
101 document.class="func">getElementById(class="string">'startBtn').className=class="string">'btn btn-start';
102 }class=class="string">"keyword">else{
103 isRunning=true;
104 document.class="func">getElementById(class="string">'startBtn').textContent=class="string">'⏸ 暂停';
105 document.class="func">getElementById(class="string">'startBtn').className=class="string">'btn btn-pause';
106 timer=class="func">setInterval(class=class="string">"keyword">function(){
107 timeLeft--;
108 updateDisplay();
109 class=class="string">"keyword">if(timeLeft<=class="number">0){
110 beep();
111 isWork=!isWork;
112 timeLeft=isWork?workTime:breakTime;
113 updateStatus();
114 updateDisplay();
115 }
116 },class="number">1000);
117 }
118}
119class=class="string">"keyword">function resetTimer(){
120 clearInterval(timer);isRunning=false;isWork=true;
121 timeLeft=workTime;
122 document.class="func">getElementById(class="string">'startBtn').textContent=class="string">'▶ 开始';
123 document.class="func">getElementById(class="string">'startBtn').className=class="string">'btn btn-start';
124 updateDisplay();updateStatus();
125}
126updateDisplay();updateStatus();
127</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=pomodoro.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
128</class="tag">body></class="tag">html>
129
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 72
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 73
番茄钟 - η空间
🍅 番茄钟
🍅 25分钟专注 → 5分钟休息 · 循环往复 · 科学摸鱼
25分钟专注 · 5分钟休息 · 科学摆烂
25:00
工作中
📖 查看源码 · 编程小白，AI生成，若体验不佳请多包涵 🙏