From 0f09aebc3909786b441063a933112163f80f98ee Mon Sep 17 00:00:00 2001
From: xiao_io <2238929232@qq.com>
Date: Wed, 9 Feb 2022 16:45:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E4=BD=93=E5=B8=83=E5=B1=80=E5=92=8C?=
=?UTF-8?q?=E7=95=AA=E8=8C=84=E9=92=9F=E6=95=B4=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/shell-chrome/assets/css/main.css | 100 ++++--
packages/shell-chrome/assets/css/main.less | 315 ++++++++++--------
.../assets/html/pomodoro/assets/css/popup.css | 107 ++++--
.../assets/html/pomodoro/assets/js/popup.js | 303 +++++++++--------
.../assets/html/pomodoro/popup.html | 47 +--
.../images => image/background}/pomo1.png | Bin
.../background}/pomo_crystal.jpg | Bin
.../background}/pomo_fire.jpeg | Bin
.../background}/pomo_foresr.jpeg | Bin
.../assets/image/background/pomo_green.jpeg | Bin 0 -> 144866 bytes
.../background}/pomo_leaf.jpeg | Bin
.../background}/pomo_light.jpeg | Bin
.../background}/pomo_ocean.jpg | Bin
.../background}/pomo_waterfall.jpg | Bin
.../assets/js/mouse-effects/mouse-style.js | 2 +-
packages/shell-chrome/assets/js/popup.js | 26 ++
packages/shell-chrome/popup.html | 77 +++--
17 files changed, 604 insertions(+), 373 deletions(-)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo1.png (100%)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_crystal.jpg (100%)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_fire.jpeg (100%)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_foresr.jpeg (100%)
create mode 100644 packages/shell-chrome/assets/image/background/pomo_green.jpeg
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_leaf.jpeg (100%)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_light.jpeg (100%)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_ocean.jpg (100%)
rename packages/shell-chrome/assets/{html/pomodoro/images => image/background}/pomo_waterfall.jpg (100%)
diff --git a/packages/shell-chrome/assets/css/main.css b/packages/shell-chrome/assets/css/main.css
index 700858c..b4e867c 100644
--- a/packages/shell-chrome/assets/css/main.css
+++ b/packages/shell-chrome/assets/css/main.css
@@ -17,23 +17,46 @@ body {
}
#popup header {
width: inherit;
- height: 30px;
+ height: 40px;
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
#popup header img {
height: inherit;
}
-#popup .article ul li {
+#popup #back {
+ display: none;
+ position: absolute;
+ top: 54px;
+ left: 10px;
+ width: 15px;
+ height: 15px;
+ background-color: transparent;
+ border-top: 2px solid #fff;
+ border-left: 2px solid #fff;
+ transform: rotate(-45deg);
+ cursor: pointer;
+}
+#popup #article #weather {
+ width: 100%;
+ height: 150px;
+ margin-top: 3px;
+ background-color: #fff;
+}
+#popup #article .left {
+ float: left;
+ width: 200px;
+}
+#popup #article .left ul li {
margin: 5px 0;
height: 45px;
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}
-#popup .article ul li span {
+#popup #article .left ul li span {
font-size: 16px;
line-height: 45px;
margin-left: 5px;
}
-#popup .article ul li #click-per .button {
+#popup #article .left ul li #click-per .button {
position: relative;
float: right;
top: 6px;
@@ -42,7 +65,7 @@ body {
height: 32px;
border-radius: 100px;
}
-#popup .article ul li #click-per .button .checkbox {
+#popup #article .left ul li #click-per .button .checkbox {
position: relative;
width: 100%;
height: 100%;
@@ -50,24 +73,24 @@ body {
cursor: pointer;
z-index: 3;
}
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .layer {
+#popup #article .left ul li #click-per .button .knobs,
+#popup #article .left ul li #click-per .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
-#popup .article ul li #click-per .button .knobs {
+#popup #article .left ul li #click-per .button .knobs {
z-index: 2;
}
-#popup .article ul li #click-per .button .layer {
+#popup #article .left ul li #click-per .button .layer {
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
-#popup .article ul li #click-per .button .knobs::before {
+#popup #article .left ul li #click-per .button .knobs::before {
content: "YES";
position: absolute;
top: 2px;
@@ -83,20 +106,20 @@ body {
background-color: #03a9f4;
border-radius: 50%;
}
-#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
+#popup #article .left ul li #click-per .button .checkbox:checked + .knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
-#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
+#popup #article .left ul li #click-per .button .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .knobs:before,
-#popup .article ul li #click-per .button .layer {
+#popup #article .left ul li #click-per .button .knobs,
+#popup #article .left ul li #click-per .button .knobs:before,
+#popup #article .left ul li #click-per .button .layer {
transition: 0.3s ease all;
}
-#popup .article ul li #mouse-style .button {
+#popup #article .left ul li #mouse-style .button {
position: relative;
float: right;
top: 6px;
@@ -105,7 +128,7 @@ body {
height: 32px;
border-radius: 100px;
}
-#popup .article ul li #mouse-style .button .checkbox {
+#popup #article .left ul li #mouse-style .button .checkbox {
position: relative;
width: 100%;
height: 100%;
@@ -113,24 +136,24 @@ body {
cursor: pointer;
z-index: 3;
}
-#popup .article ul li #mouse-style .button .knobs,
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .left ul li #mouse-style .button .knobs,
+#popup #article .left ul li #mouse-style .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
-#popup .article ul li #mouse-style .button .knobs {
+#popup #article .left ul li #mouse-style .button .knobs {
z-index: 2;
}
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .left ul li #mouse-style .button .layer {
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
-#popup .article ul li #mouse-style .button .knobs::before {
+#popup #article .left ul li #mouse-style .button .knobs::before {
content: "YES";
position: absolute;
top: 2px;
@@ -146,25 +169,44 @@ body {
background-color: #03a9f4;
border-radius: 50%;
}
-#popup .article ul li #mouse-style .button .checkbox:checked + .knobs:before {
+#popup #article .left ul li #mouse-style .button .checkbox:checked + .knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
-#popup .article ul li #mouse-style .button .checkbox:checked ~ .layer {
+#popup #article .left ul li #mouse-style .button .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
-#popup .article ul li #mouse-style .button .knobs,
-#popup .article ul li #mouse-style .button .knobs:before,
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .left ul li #mouse-style .button .knobs,
+#popup #article .left ul li #mouse-style .button .knobs:before,
+#popup #article .left ul li #mouse-style .button .layer {
transition: 0.3s ease all;
}
+#popup #article .right {
+ float: right;
+ width: 100px;
+}
+#popup #article .right #clock {
+ width: 80px;
+ height: 80px;
+ margin: 30px auto;
+ background-color: #fff;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 80px;
+ cursor: pointer;
+ font-size: 20px;
+}
+#popup #article .right #clock:active {
+ transform: translate(0px, 1px);
+ box-shadow: 0px 1px 0px 0px;
+}
#popup #btnScreenshot {
position: absolute;
top: 1px;
right: 5px;
- width: 64px;
- height: 27px;
+ width: 81px;
+ height: 37px;
color: #fff;
font-weight: 500;
cursor: pointer;
diff --git a/packages/shell-chrome/assets/css/main.less b/packages/shell-chrome/assets/css/main.less
index d9eee33..1f4f651 100644
--- a/packages/shell-chrome/assets/css/main.less
+++ b/packages/shell-chrome/assets/css/main.less
@@ -19,162 +19,205 @@ body {
width: 300px;
header{
width: inherit;
- height: 30px;
+ height: 40px;
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
img {
height: inherit;
}
}
- .article{
- ul{
- li{
- margin: 5px 0;
- height: 45px;
- background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
- span{
- font-size: 16px;
- line-height: 45px;
- margin-left: 5px;
- }
- #click-per{
- .button {
- position: relative;
- float: right;
- top: 6px;
- right: 6px;
- width: 66px;
- height: 32px;
- border-radius: 100px;
- .checkbox {
+ #back {
+ display: none;
+ position: absolute;
+ top: 54px;
+ left: 10px;
+ width: 15px;
+ height: 15px;
+ background-color: transparent;
+ border-top: 2px solid #fff;
+ border-left: 2px solid #fff;
+ transform: rotate(-45deg);
+ cursor: pointer;
+ }
+ #article{
+ #weather{
+ width: 100%;
+ height: 150px;
+ margin-top: 3px;
+ background-color: #fff;
+ }
+ .left{
+ float: left;
+ width: 200px;
+ ul{
+ li{
+ margin: 5px 0;
+ height: 45px;
+ background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
+ span{
+ font-size: 16px;
+ line-height: 45px;
+ margin-left: 5px;
+ }
+ #click-per{
+ .button {
position: relative;
- width: 100%;
- height: 100%;
- opacity: 0;
- cursor: pointer;
- z-index: 3;
- }
- .knobs,
- .layer {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .knobs {
- z-index: 2;
- }
- .layer{
+ float: right;
+ top: 6px;
+ right: 6px;
+ width: 66px;
+ height: 32px;
border-radius: 100px;
- width: 100%;
- background-color: #ebf7fc;
- z-index: 1;
- }
- .knobs::before {
- content: "YES";
- position: absolute;
- top: 2px;
- left: 34px;
- width: 20px;
- height: 10px;
- color: #fff;
- font-size: 10px;
- font-weight: bold;
- text-align: center;
- line-height: 1;
- padding: 9px 4px;
- background-color: #03a9f4;
- border-radius: 50%;
- }
- .checkbox:checked+.knobs:before {
- content: "NO";
- left: 3px;
- background-color: #f44336;
- }
- .checkbox:checked~.layer {
- background-color: #fcebeb;
- }
- .knobs,
- .knobs:before,
- .layer{
- transition: 0.3s ease all;
+ .checkbox {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ z-index: 3;
+ }
+ .knobs,
+ .layer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+ .knobs {
+ z-index: 2;
+ }
+ .layer{
+ border-radius: 100px;
+ width: 100%;
+ background-color: #ebf7fc;
+ z-index: 1;
+ }
+ .knobs::before {
+ content: "YES";
+ position: absolute;
+ top: 2px;
+ left: 34px;
+ width: 20px;
+ height: 10px;
+ color: #fff;
+ font-size: 10px;
+ font-weight: bold;
+ text-align: center;
+ line-height: 1;
+ padding: 9px 4px;
+ background-color: #03a9f4;
+ border-radius: 50%;
+ }
+ .checkbox:checked+.knobs:before {
+ content: "NO";
+ left: 3px;
+ background-color: #f44336;
+ }
+ .checkbox:checked~.layer {
+ background-color: #fcebeb;
+ }
+ .knobs,
+ .knobs:before,
+ .layer{
+ transition: 0.3s ease all;
+ }
}
}
- }
- #mouse-style{
- .button {
- position: relative;
- float: right;
- top: 6px;
- right: 6px;
- width: 66px;
- height: 32px;
- border-radius: 100px;
- .checkbox {
+ #mouse-style{
+ .button {
position: relative;
- width: 100%;
- height: 100%;
- opacity: 0;
- cursor: pointer;
- z-index: 3;
- }
- .knobs,
- .layer {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .knobs {
- z-index: 2;
- }
- .layer{
+ float: right;
+ top: 6px;
+ right: 6px;
+ width: 66px;
+ height: 32px;
border-radius: 100px;
- width: 100%;
- background-color: #ebf7fc;
- z-index: 1;
- }
- .knobs::before {
- content: "YES";
- position: absolute;
- top: 2px;
- left: 34px;
- width: 20px;
- height: 10px;
- color: #fff;
- font-size: 10px;
- font-weight: bold;
- text-align: center;
- line-height: 1;
- padding: 9px 4px;
- background-color: #03a9f4;
- border-radius: 50%;
- }
- .checkbox:checked+.knobs:before {
- content: "NO";
- left: 3px;
- background-color: #f44336;
- }
- .checkbox:checked~.layer {
- background-color: #fcebeb;
- }
- .knobs,
- .knobs:before,
- .layer{
- transition: 0.3s ease all;
+ .checkbox {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ z-index: 3;
+ }
+ .knobs,
+ .layer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+ .knobs {
+ z-index: 2;
+ }
+ .layer{
+ border-radius: 100px;
+ width: 100%;
+ background-color: #ebf7fc;
+ z-index: 1;
+ }
+ .knobs::before {
+ content: "YES";
+ position: absolute;
+ top: 2px;
+ left: 34px;
+ width: 20px;
+ height: 10px;
+ color: #fff;
+ font-size: 10px;
+ font-weight: bold;
+ text-align: center;
+ line-height: 1;
+ padding: 9px 4px;
+ background-color: #03a9f4;
+ border-radius: 50%;
+ }
+ .checkbox:checked+.knobs:before {
+ content: "NO";
+ left: 3px;
+ background-color: #f44336;
+ }
+ .checkbox:checked~.layer {
+ background-color: #fcebeb;
+ }
+ .knobs,
+ .knobs:before,
+ .layer{
+ transition: 0.3s ease all;
+ }
}
}
}
}
}
+ .right{
+ float: right;
+ width: 100px;
+ #clock{
+ width: 80px;
+ height: 80px;
+ margin: 30px auto;
+ background-color: #fff;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 80px;
+ cursor: pointer;
+ font-size: 20px;
+ }
+ #clock:active{
+ transform: translate(0px, 1px);
+ box-shadow: 0px 1px 0px 0px;
+ }
+ }
+
}
#btnScreenshot{
position: absolute;
top: 1px;
right: 5px;
- width: 64px;
- height: 27px;
+ width: 81px;
+ height: 37px;
color: #fff;
font-weight: 500;
cursor: pointer;
@@ -189,4 +232,6 @@ body {
transform: translate(0px, 1px);
box-shadow: 0px 1px 0px 0px;
}
+
+
}
diff --git a/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css b/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css
index 3c92d2d..51ddb04 100644
--- a/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css
+++ b/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css
@@ -1,12 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
-
body {
/* background-color: rgb(51, 11, 116); */
background: url(../../images/pomo_green.jpeg) no-repeat;
- background-image: "../../";
+ background-size: cover;
+ /* background-image: "../../"; */
/* color: white; */
- font-family: 'Source Sans Pro','Fira Sans', sans-serif;
+ font-family: 'Source Sans Pro', 'Fira Sans', sans-serif;
margin: 0;
padding: 0;
/* width: 280px; */
@@ -19,6 +19,63 @@ body {
padding: 10px 0 20px;
}
+#left {
+ position: absolute;
+ width: 25px;
+ height: 45px;
+ top: 180px;
+ left: 0;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ opacity: 0.5;
+ cursor: pointer;
+}
+
+#left:hover {
+ background-color: #b4b2b2;
+}
+
+#left::before {
+ position: absolute;
+ content: "";
+ top: 12px;
+ left: 5px;
+ width: 15px;
+ height: 15px;
+ border-top: 2px solid #bbb9b7;
+ border-left: 2px solid #bbb9b7;
+ transform: rotate(-45deg);
+}
+
+#right {
+ position: absolute;
+ width: 25px;
+ height: 45px;
+ top: 180px;
+ right: 0;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ opacity: 0.8;
+ cursor: pointer;
+}
+
+#right:hover {
+ background-color: #b4b2b2;
+}
+
+#right::after {
+ z-index: 9999;
+ position: absolute;
+ content: "";
+ top: 12px;
+ right: 5px;
+ width: 15px;
+ height: 15px;
+ border-top: 2px solid #585551;
+ border-right: 2px solid #585551;
+ transform: rotate(45deg);
+}
+
.buttons {
width: fit-content;
margin: auto;
@@ -26,7 +83,7 @@ body {
color: rgb(169, 172, 172);
}
-.buttons .slider{
+.buttons .slider {
color: rgb(247, 226, 230);
}
@@ -37,7 +94,9 @@ body {
padding: 8px;
}
+
/*计数部分*/
+
#countdown {
clear: both;
width: fit-content;
@@ -48,12 +107,13 @@ body {
color: aliceblue;
}
-#countdown span{
+#countdown span {
opacity: 0;
}
-
-#start-btn,#end-btn,#reset-btn {
+#start-btn,
+#end-btn,
+#reset-btn {
/* 文字颜色 */
color: #f5e4b9;
/* 清除背景色 */
@@ -71,24 +131,26 @@ body {
/* width: 40px; */
font-size: 16px;
margin: 4px 2px;
- -webkit-transition-duration: 0.4s; /* Safari */
+ -webkit-transition-duration: 0.4s;
+ /* Safari */
transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
-
- text-shadow: 1px 1px 1px rgba(255,255,255, .1);
- border-radius: 25px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-
+ text-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
+ border-radius: 25px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
+
#start-btn {
background-color: white;
color: black;
border: 1px solid #f5e4b9;
}
+
+
/* 悬停样式 */
+
#start-btn:hover {
background-color: #f5e4b9;
color: white;
@@ -100,12 +162,16 @@ body {
border: 1px solid #ECB390;
display: none;
}
+
+
/* 悬停样式 */
+
#end-btn:hover {
background-color: #ECB390;
color: white;
}
+
/* #end-btn{
width: 40px;
margin: 10px auto 0;
@@ -115,6 +181,7 @@ body {
cursor: pointer;
} */
+
/* #reset-btn {
width: 40px;
margin: 10px auto 0;
@@ -129,7 +196,10 @@ body {
color: black;
border: 1px solid #DD4A48;
}
+
+
/* 悬停样式 */
+
#reset-btn:hover {
background-color: #DD4A48;
color: white;
@@ -141,13 +211,13 @@ body {
display: none;
} */
+
/*选中的按钮*/
+
.selected {
background-color: rgb(244, 242, 248);
}
-
-
ul {
padding: 0;
}
@@ -164,13 +234,12 @@ li {
float: right;
}
-
.hide {
display: none;
}
-footer .settings{
+footer .settings {
position: absolute;
bottom: 5px;
right: 5px;
-}
+}
\ No newline at end of file
diff --git a/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js b/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js
index 122fa0a..cffd503 100644
--- a/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js
+++ b/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js
@@ -42,121 +42,117 @@ let pomodoro = "pomodoro";
//番茄钟按钮-绑定事件
document.addEventListener("click", (e) => {
- if (!e.target.matches(".button")) return;
+ if (!e.target.matches(".button")) return;
- // reset when pomodoro button selected
- pause = true;
- seconds = 60;
- startBtn.innerHTML = "开始";
+ // reset when pomodoro button selected
+ pause = true;
+ seconds = 60;
+ startBtn.innerHTML = "开始";
- chrome.storage.sync.set({ pause: pause, seconds: seconds }, function () {
- if (!chrome.runtime.error) {
- alert("初始化pause、seconds");
- }
- });
-
- // 定时器初始化
- if (e.target.matches("#pomodoro-btn")) {
- countdownTimer.innerHTML = "25:00";
- pomodoro = "pomodoro";
- minutes = 25;
- chrome.storage.sync.set(
- { minutes: minutes, countdownTimer: "25:00" },
- function () {
+ chrome.storage.sync.set({ pause: pause, seconds: seconds }, function() {
if (!chrome.runtime.error) {
- alert("added target pomodoro!");
+ alert("初始化pause、seconds");
}
- }
- );
- }
+ });
+
+ // 定时器初始化
+ if (e.target.matches("#pomodoro-btn")) {
+ countdownTimer.innerHTML = "25:00";
+ pomodoro = "pomodoro";
+ minutes = 25;
+ chrome.storage.sync.set({ minutes: minutes, countdownTimer: "25:00" },
+ function() {
+ if (!chrome.runtime.error) {
+ alert("added target pomodoro!");
+ }
+ }
+ );
+ }
});
// 开始按钮-绑定事件
startBtn.addEventListener("click", () => {
- // countdown(); 在后台运行，需要取出状态
- debounce(start(), 100);
+ // countdown(); 在后台运行，需要取出状态
+ debounce(start(), 100);
});
function start() {
- chrome.storage.sync.get("pomoData", ({ pomoData }) => {
- const { minutes, seconds, status } = pomoData;
+ chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+ const { minutes, seconds, status } = pomoData;
- chrome.runtime.sendMessage(
- {
- status: "start",
- senderId: "pomo",
- content: {
- minutes,
- seconds,
- },
- },
- (response) => {
- console.log(response);
+ chrome.runtime.sendMessage({
+ status: "start",
+ senderId: "pomo",
+ content: {
+ minutes,
+ seconds,
+ },
+ },
+ (response) => {
+ console.log(response);
- startBtn.style.display = "none";
- endBtn.style.display = "block";
- getTimer();
- }
- );
- });
+ startBtn.style.display = "none";
+ endBtn.style.display = "block";
+ getTimer();
+ }
+ );
+ });
}
endBtn.addEventListener("click", () => {
- setTimeout(end, 200);
+ setTimeout(end, 200);
});
function end() {
- chrome.runtime.sendMessage(
- {
- status: "paused",
- senderId: "pomo",
- },
- (response) => {
- console.log(response);
-
- startBtn.style.display = "block";
- endBtn.style.display = "none";
- clearTimer();
- }
- );
-}
-
-function getTimer() {
- clearTimer();
- timer = setInterval(() => {
- chrome.storage.sync.get("pomoData", ({ pomoData }) => {
- // console.log("pomodata****",pomoData)
- // const{minutes,seconds,countdownTimer} = pomoData;
- countdownTimer.innerHTML = pomoData.countdownTimer;
-
- //更新后倒计时判断，如果结束则重新初始化界面
- if(pomoData.countdownTimer == "00:00"){
-
- audio.play();
- //不能放在页面上，要在后台进行
- chrome.runtime.sendMessage(
- {
- status: "playend",
+ chrome.runtime.sendMessage({
+ status: "paused",
senderId: "pomo",
- },
- (response) => {
- console.log(response,"**************下面");
- countdownTimer.innerHTML = "25:00";
+ },
+ (response) => {
+ console.log(response);
startBtn.style.display = "block";
endBtn.style.display = "none";
clearTimer();
- }
- );
+ }
+ );
+}
- }
- });
- }, 200);
+function getTimer() {
+ clearTimer();
+ timer = setInterval(() => {
+ chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+ // console.log("pomodata****",pomoData)
+ // const{minutes,seconds,countdownTimer} = pomoData;
+ countdownTimer.innerHTML = pomoData.countdownTimer;
+
+ //更新后倒计时判断，如果结束则重新初始化界面
+ if (pomoData.countdownTimer == "00:00") {
+
+ audio.play();
+ //不能放在页面上，要在后台进行
+ chrome.runtime.sendMessage({
+ status: "playend",
+ senderId: "pomo",
+ },
+ (response) => {
+ console.log(response, "**************下面");
+ countdownTimer.innerHTML = "25:00";
+
+ startBtn.style.display = "block";
+ endBtn.style.display = "none";
+ clearTimer();
+ }
+ );
+
+ }
+ });
+ }, 200);
}
function clearTimer() {
- clearInterval(timer);
+ clearInterval(timer);
}
/*
@@ -164,59 +160,104 @@ function clearTimer() {
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn, delay) {
- let timer = null; //借助闭包
- return function () {
- if (timer) {
- clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
- timer = setTimeout(fn, delay);
- } else {
- timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
- }
- };
+ let timer = null; //借助闭包
+ return function() {
+ if (timer) {
+ clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
+ timer = setTimeout(fn, delay);
+ } else {
+ timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
+ }
+ };
}
// 重置按钮-绑定事件
resetBtn.addEventListener("click", () => {
- setTimeout(() => {
- chrome.runtime.sendMessage(
- {
- status: "reset",
- senderId: "pomo",
- },
- (response) => {
- // console.log(response);
- countdownTimer.innerHTML = "25:00";
+ setTimeout(() => {
+ chrome.runtime.sendMessage({
+ status: "reset",
+ senderId: "pomo",
+ },
+ (response) => {
+ // console.log(response);
+ countdownTimer.innerHTML = "25:00";
- startBtn.style.display = "block";
- endBtn.style.display = "none";
- clearTimer();
- }
- );
- }, 100);
+ startBtn.style.display = "block";
+ endBtn.style.display = "none";
+ clearTimer();
+ }
+ );
+ }, 100);
});
//页面反复打开时页面初始化
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
- console.log(pomoData);
- const { status } = pomoData;
+ console.log(pomoData);
+ const { status } = pomoData;
- if (status === "start") {
- startBtn.style.display = "none";
- endBtn.style.display = "block";
- getTimer();
- } else if (status === "paused") {
- startBtn.style.display = "block";
- endBtn.style.display = "none";
- chrome.storage.sync.get("pomoData", ({ pomoData }) => {
- countdownTimer.innerHTML = pomoData.countdownTimer;
- });
- } else if (status === "init") {
- chrome.runtime.sendMessage({
- status: "init",
- senderId: "pomo",
- });
- countdownTimer.innerHTML = "25:00";
- }else if(status === 'playend'){
- countdownTimer.innerHTML = "25:00";
- }
+ if (status === "start") {
+ startBtn.style.display = "none";
+ endBtn.style.display = "block";
+ getTimer();
+ } else if (status === "paused") {
+ startBtn.style.display = "block";
+ endBtn.style.display = "none";
+ chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+ countdownTimer.innerHTML = pomoData.countdownTimer;
+ });
+ } else if (status === "init") {
+ chrome.runtime.sendMessage({
+ status: "init",
+ senderId: "pomo",
+ });
+ countdownTimer.innerHTML = "25:00";
+ } else if (status === 'playend') {
+ countdownTimer.innerHTML = "25:00";
+ }
});
+
+// 轮播图
+let photos = ["../../image/background/pomo_green.jpeg",
+ "../../image/background/pomo1.png",
+ "../../image/background/pomo_waterfall.jpg",
+ "../../image/background/pomo_ocean.jpg",
+ "../../image/background/pomo_light.jpeg",
+ "../../image/background/pomo_leaf.jpeg",
+ "../../image/background/pomo_foresr.jpeg",
+ "../../image/background/pomo_fire.jpeg",
+ "../../image/background/pomo_crystal.jpg"
+]
+
+let len = photos.length;
+// console.log(len);
+let index = 0;
+document.getElementById('right').addEventListener("click", function() {
+ change_r();
+});
+document.getElementById('left').addEventListener("click", function() {
+ change_l();
+});
+
+function change_l() {
+ index--;
+ if (index < 0) {
+ index = len - 1;
+ }
+ change(index);
+}
+
+function change_r() {
+ index++;
+ if (index == len) {
+ index = 0;
+ }
+ change(index);
+}
+
+function change(n) {
+ document.body.style = "background: url(" + photos[n] + ") no-repeat; background-size: cover;";
+}
+
+let t = setInterval(function() {
+ change_r();
+}, 40000);
\ No newline at end of file
diff --git a/packages/shell-chrome/assets/html/pomodoro/popup.html b/packages/shell-chrome/assets/html/pomodoro/popup.html
index 1301838..ec337b8 100644
--- a/packages/shell-chrome/assets/html/pomodoro/popup.html
+++ b/packages/shell-chrome/assets/html/pomodoro/popup.html
@@ -1,5 +1,6 @@
+
@@ -10,34 +11,35 @@
+
-
+
-
-
- <
- >
-
+
+
+
-
-
-
- 00:00
-
-
-
-
-
-
-
+
+
+ 00:00
+
+
+
+
+
+
+