diff --git a/gitee_pomodoro/assets/css/popup.css b/gitee_pomodoro/assets/css/popup.css index 3c342a2..798fc33 100644 --- a/gitee_pomodoro/assets/css/popup.css +++ b/gitee_pomodoro/assets/css/popup.css @@ -1,11 +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=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_ocean.jpg) no-repeat; + background: url(../../images/pomo_green.jpeg) no-repeat; background-image: "../../"; /* color: white; */ - font-family: 'Fira Sans', sans-serif; + font-family: 'Source Sans Pro','Fira Sans', sans-serif; margin: 0; padding: 0; width: 280px; @@ -42,7 +43,7 @@ body { margin: auto; font-size: 60px; font-weight: 500; - padding: 20px; + padding: 20%; color: aliceblue; } @@ -50,44 +51,101 @@ body { opacity: 0; } -#start-btn ,#end-btn{ - width: 40px; - margin: 10px auto 0; - padding: 10px 30px; + +#start-btn,#end-btn,#reset-btn { + /* 文字颜色 */ + color: #f5e4b9; + /* 清除背景色 */ + background: transparent; + /* 边框样式、颜色、宽度 */ + border: 1px solid #f5e4b9; + /* 给边框添加圆角 */ + border-radius: 6px; + /* 字母转大写 */ + border: none; + color: white; + padding: 10px 26px; + display: block; text-align: center; - background-color: rgb(0, 179, 12); + /* width: 40px; */ + font-size: 16px; + margin: 4px 2px; + -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); + + +} +#start-btn { + background-color: white; + color: black; + border: 1px solid #f5e4b9; +} +/* 悬停样式 */ +#start-btn:hover { + background-color: #f5e4b9; + color: white; } -#reset-btn { - width: 40px; - margin: 10px auto 0; - padding: 10px 30px; - text-align: center; - background-color: rgb(187, 0, 0); - cursor: pointer; -} - -#end-btn{ - background-color: rgb(0, 128, 187); +#end-btn { + background-color: white; + color: black; + border: 1px solid #ECB390; display: none; } +/* 悬停样式 */ +#end-btn:hover { + background-color: #ECB390; + color: white; +} + +/* #end-btn{ + width: 40px; + margin: 10px auto 0; + padding: 10px 30px; + text-align: center; + background-color: #F5EEDC; + cursor: pointer; +} */ + +/* #reset-btn { + width: 40px; + margin: 10px auto 0; + padding: 10px 30px; + text-align: center; + background-color: #DD4A48; + cursor: pointer; +} */ + +#reset-btn { + background-color: white; + color: black; + border: 1px solid #DD4A48; +} +/* 悬停样式 */ +#reset-btn:hover { + background-color: #DD4A48; + color: white; +} + + +/* #end-btn{ + background-color: #ECB390; + display: none; +} */ /*选中的按钮*/ .selected { background-color: rgb(244, 242, 248); } -#current-task-display { - width: 100%; - padding-top: 30px; - margin: auto; - text-align: center; -} -#tasks-container { - margin: auto; -} ul { padding: 0; @@ -105,52 +163,6 @@ li { float: right; } -.delete-btn { - padding: 10px; - background-color: rgb(33, 10, 70); - color: white; - margin-left: 10px; - cursor: pointer; -} - -#add-task-btn { - width: 200px; - margin: 0 auto 10px; - /* background-color: rgb(33, 10, 70); */ - padding: 8px; - cursor: pointer; - text-align: center; -} - -#task-form { - clear: both; - background-color: white; - color: black; - height: 100px; - padding: 15px; -} - -#text { - border: none; - width: 95%; - font-size: 18px; - margin-bottom: 5px; -} - -#est-pomodoro { - margin: 10px 10px 0; - width: 50px; - padding: 5px; -} - -#save, #cancel { - border: none; - width: 60px; - padding: 8px; - margin-left: 5px; - cursor: pointer; - float: right; -} .hide { display: none; diff --git a/gitee_pomodoro/assets/js/popup.js b/gitee_pomodoro/assets/js/popup.js index 15a88a9..25f3955 100644 --- a/gitee_pomodoro/assets/js/popup.js +++ b/gitee_pomodoro/assets/js/popup.js @@ -130,15 +130,16 @@ function getTimer() { //更新后倒计时判断，如果结束则重新初始化界面 if(pomoData.countdownTimer == "00:00"){ - audio.play(); + audio.play(); + //不能放在页面上，要在后台进行 chrome.runtime.sendMessage( { - status: "init", + status: "playend", }, (response) => { - console.log(response); + console.log(response,"**************下面"); countdownTimer.innerHTML = "25:00"; - + startBtn.style.display = "block"; endBtn.style.display = "none"; clearTimer(); @@ -210,5 +211,7 @@ chrome.storage.sync.get("pomoData", ({ pomoData }) => { status: "init", }); countdownTimer.innerHTML = "25:00"; + }else if(status === 'playend'){ + countdownTimer.innerHTML = "25:00"; } }); diff --git a/gitee_pomodoro/assets/js/script.js b/gitee_pomodoro/assets/js/script.js deleted file mode 100644 index 9b24439..0000000 --- a/gitee_pomodoro/assets/js/script.js +++ /dev/null @@ -1,356 +0,0 @@ -const pomodoroBtns = document.querySelectorAll('.button') -const pomodoroBtn = document.getElementById('pomodoro-btn') -const shortBreakBtn = document.getElementById('short-break-btn') -const longBreakBtn = document.getElementById('long-break-btn') - -const startBtn = document.getElementById('start-btn') -const resetBtn = document.getElementById('reset-btn') -const countdownTimer = document.getElementById('countdown') - -const addTaskBtn = document.getElementById('add-task-btn') -const addTaskForm = document.getElementById('task-form') -const cancelBtn = document.getElementById('cancel') -const taskNameInput = document.getElementById('text') -const pomodoroInput = document.getElementById('est-pomodoro') -const saveBtn = document.getElementById('save') -const tasksList = document.getElementById('tasks') -const template = document.getElementById('list-item-template') -const selectedTask = document.getElementById('selected-task') -const audio = document.getElementById('audio') - -let minutes,seconds -let pause -let pomodoro = "pomodoro" -let tasks = [] -let pomodorosCompleted = 0 -let selectedTaskElement - -let array = ["minutes","seconds","pause","countdownTimer","pbutton"]; - -//变量初始化 -chrome.storage.sync.get(array,function(value){ - if(!chrome.runtime.error){ - // console.log(value); - // alert("value:"+value) - - if(value.minutes){ - minutes = value.minutes; - }else{ - minutes = 25; - } - - if(value.seconds){ - seconds = value.seconds; - }else{ - seconds = 60; - } - - if(value.countdownTimer){ - countdownTimer.innerHTML = value.countdownTimer; - }else{ - countdownTimer.innerHTML = "25:00"; - } - - if((value.pause) && (value.countdownTimer != "25:00")){ - pause = value.pause; - startBtn.innerHTML = "开始" - }else if((!value.pause) && (value.countdownTimer != "25:00")){ - pause = value.pause; - startBtn.innerHTML = "暂停" - countdown(); - }else{ - pause = true; - } - - if (value.pbutton){ - if (value.pbutton == "shortBreakBtn"){ - shortBreakBtn.classList.add('selected'); - }else if (value.pbutton == "longBreakBtn"){ - longBreakBtn.classList.add('selected'); - }else { - pomodoroBtn.classList.add('selected'); - } - }else{ - pomodoroBtn.classList.add('selected'); - } - } -}); - -//番茄钟按钮-绑定事件 -document.addEventListener('click', e => { - if(!e.target.matches('.button')) return; - - // 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"); - } - }) - - //选中番茄钟按钮指定样式 - pomodoroBtns.forEach(button => { - button.classList.remove('selected') - }) - e.target.classList.add('selected') - - let pbutton; - - if (e.target.classList == shortBreakBtn.classList){ - pbutton = "shortBreakBtn" - }else if (e.target.classList == longBreakBtn.classList){ - pbutton = "longBreakBtn" - }else { - pbutton = "pomodoroBtn" - } - - chrome.storage.sync.set({"pbutton":pbutton},function(){ - if(!chrome.runtime.error){ - console.log("added target pomodoro"); - } - }) - - // 定时器初始化 - 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', async() => { - // if countdown is paused, start/resume countdown, otherwise, pause countdown - if (pause) { - startBtn.innerHTML = "暂停"; - pause = false - countdown(); - chrome.storage.sync.set({"pause":false},function(){ - if(!chrome.runtime.error){ - alert("开始专注啦！"); - } - }) - } else if (!pause) { - startBtn.innerHTML = "开始" - pause = true - chrome.storage.sync.set({"pause":true},function(){ - if(!chrome.runtime.error){ - alert("你暂停了专注！") - } - }) - }; - -}) - -// 重置按钮-绑定事件 -resetBtn.addEventListener('click', () => { - minutes = 25 - pause = true - pomodoro = "pomodoro" - seconds = 60 - - startBtn.innerHTML = "开始" - countdownTimer.innerHTML = '25:00' - - let dict = { - "minutes":25, - "pause":true, - "seconds":60, - "countdownTimer":"25:00" - } - - chrome.storage.sync.set(dict,function(){ - if(!chrome.runtime.error){ - alert("reset"); - } - }) - -}) - - -// 番茄钟倒计时功能 -function countdown() { - // return if countdown is paused - if(pause) return; - - // set minutes and seconds - let currentMins = minutes - 1; - seconds--; - let currentTimer = (currentMins < 10 ? "0" : "") + currentMins.toString() + ':' + (seconds < 10 ? "0" : "") + String(seconds); - countdownTimer.innerHTML = currentTimer; - - chrome.storage.sync.set({"seconds":seconds,"countdownTimer":currentTimer},function(){ - if(!chrome.runtime.error){ - console.log("started"); - } - }) - // count down every second, when a minute is up, countdown one minute - // when time reaches 0:00, reset - if(seconds > 0) { - setTimeout(countdown, 1000); - } else if(currentMins > 0){ - seconds = 60 - minutes--; - chrome.storage.sync.set({"seconds":seconds,"minutes":minutes},function(){ - if(!chrome.runtime.error){ - console.log("started"); - } - }) - countdown(); - } else if(currentMins === 0) { - audio.play() - reset() - } -} - -// reset function when countdown ends -function reset() { - // set to start the next round - startBtn.innerHTML = "Start" - pause = true - - pomodoroBtns.forEach(button => { - button.classList.remove('selected') - }) - - // if current round is a break, set for pomodoro - if (pomodoro === "short break" || pomodoro === "long break") { - pomodoro = "pomodoro" - countdownTimer.innerHTML = '25:00' - minutes = 25 - pomodoroBtn.classList.add('selected') - return - } - - // if current round is a pomodoro, set for break - // if less than four pomodoros have been completed, go to short break - // if four pomodoros have been completed, go to long break - if (pomodoro === "pomodoro" && pomodorosCompleted < 4) { - pomodorosCompleted++ - pomodoro = "short break" - countdownTimer.innerHTML = '05:00' - minutes = 5 - shortBreakBtn.classList.add('selected') - } else if (pomodoro === "pomodoro" && pomodorosCompleted === 4) { - pomodorosCompleted = 0 - pomodoro = "long break" - countdownTimer.innerHTML = '15:00' - minutes = 15 - longBreakBtn.classList.add('selected') - } - - // if a task has been selected - if (selectedTaskElement != null) { - const selectedTaskId = selectedTaskElement.dataset.taskId - const current = tasks.find(task => task.id === selectedTaskId) - current.completedPomodoros++ - const pomodoroCount = selectedTaskElement.querySelector('.pomodoro-count') - pomodoroCount.innerHTML = current.completedPomodoros.toString() + '/' + current.totalPomodoros - } - // TODO add option to start next round automatically -} - -/***************************************************************************************************** - **任务栏部分功能 - ****************************************************************************************************/ -// show/hide task form -addTaskBtn.addEventListener('click', () => { - addTaskForm.classList.toggle('hide') -}) - -// cancel task and close task form -cancelBtn.addEventListener('click', () => { - taskNameInput.value = "" - pomodoroInput.value = "" - addTaskForm.classList.add('hide') -}) - -//保存要做的任务并放在页面上 -saveBtn.addEventListener('click', e => { - e.preventDefault(); - - // get the inputs - const taskName = taskNameInput.value - const pomodoros = pomodoroInput.value - - // don't add task if a form element is blank or estimated pomodoros is <=0 - if (taskName === "" || pomodoros === "" || pomodoros <= 0) return - - // create new object - const newTask = { - name: taskName, - completedPomodoros: 0, - totalPomodoros: pomodoros, - complete: false, - id: new Date().valueOf().toString() - } - // add task to array - tasks.push(newTask) - // render task - addTask(newTask) - - // clear inputs - taskNameInput.value = "" - pomodoroInput.value = "" -}) - -// event listener for the list item, checkbox and delete button -document.addEventListener('click', e => { - // if a delete button is selected - if(e.target.matches('.delete-btn')) { - // find the list item associaited with the delete button and remove it - const listItem = e.target.closest('.list-item') - listItem.remove() - - // find the id of the task to remove the task object from the array - const taskId = listItem.dataset.taskId - tasks = tasks.filter(task => task.id !== taskId ) - - // remove title when selected task is deleted - if (listItem === selectedTaskElement) { - selectedTask.innerHTML = "" - } - } - // if a list item is selected - if(e.target.matches('.list-item')) { - // set the task as the selected element and put title in selected-task div - selectedTaskElement = e.target - const taskName = e.target.querySelector('.task-name') - const text = taskName.innerHTML - selectedTask.innerHTML = text - } - - // if a checkbox is selected - if(e.target.matches('input[type=checkbox]')) { - // ge the list item and the id of the item - const listItem = e.target.closest('.list-item') - const taskId = listItem.dataset.taskId - // find the task object in the array - const checkedTask = tasks.find(task => task.id === taskId) - // if set to true, change to false, and if set to false, set to true - if(checkedTask.complete) checkedTask.complete = false - else if(!checkedTask.complete)checkedTask.complete = true - } -}) - -// add task as list item -function addTask(task) { - const templateClone = template.content.cloneNode(true) - const listItem = templateClone.querySelector('.list-item') - listItem.dataset.taskId = task.id - const checkbox = templateClone.querySelector('input[type=checkbox]') - checkbox.checked = task.complete - const taskName = templateClone.querySelector('.task-name') - taskName.innerHTML = task.name - const pomodoroCount = templateClone.querySelector('.pomodoro-count') - pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros - tasksList.appendChild(templateClone) -} \ No newline at end of file diff --git a/gitee_pomodoro/background.js b/gitee_pomodoro/background.js index c0bb953..dfffdf2 100644 --- a/gitee_pomodoro/background.js +++ b/gitee_pomodoro/background.js @@ -21,11 +21,6 @@ let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"]; //全局唯一的定时器 let timer = null; - -// 记住 是否暂停、 - -// 判断计时剩余时间 - chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { const { status, content } = message; @@ -52,26 +47,42 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { status: "init", }, }); - } else { + } else if (status === "init") { //init初始化 chrome.storage.sync.set({ pomoData: { - minutes: 0, - seconds: 5, + minutes: 24, + seconds: 60, countdownTimer: "25:00", status: "start", }, }); + } else { + //playend 初始化 + chrome.storage.sync.set({ + pomoData: { + minutes: 24, + seconds: 60, + countdownTimer: "25:00", + status: "playend", + }, + }); } + + //创建结束通知：待完成 + chrome.storage.sync.set({ status, }); + //后台播放完成提示音乐 + if (message.action === "play") { + // audio.play(); + } sendResponse(); }); // 番茄钟倒计时功能 function countdown({ minutes, seconds, status }) { - // 设置分钟和秒数 // let currentMins = minutes - 1; seconds--; @@ -83,7 +94,7 @@ function countdown({ minutes, seconds, status }) { seconds; // countdownTimer.innerHTML = currentTimer; 拿到 console.log("分秒=============", minutes, seconds); - + chrome.storage.sync.set( { pomoData: { @@ -100,6 +111,11 @@ function countdown({ minutes, seconds, status }) { } ); + //设置badge文本用来显示剩余分钟数 + chrome.storage.sync.get("pomoData", ({ pomoData }) => { + chrome.action.setBadgeText({ text: pomoData.minutes.toString() }); + }); + console.log(currentTimer); // count down every second, when a minute is up, countdown one minute // when time reaches 0:00, reset @@ -125,6 +141,9 @@ function countdown({ minutes, seconds, status }) { } } ); - countdown({ minutes, seconds,status }); - } + countdown({ minutes, seconds, status }); + } } + +//设置badge文本背景颜色 +chrome.action.setBadgeBackgroundColor({ color: "#DD4A48" }); diff --git a/gitee_pomodoro/images/pomo_fire.jpeg b/gitee_pomodoro/images/pomo_fire.jpeg new file mode 100644 index 0000000..91f1a30 Binary files /dev/null and b/gitee_pomodoro/images/pomo_fire.jpeg differ diff --git a/gitee_pomodoro/images/pomo_foresr.jpeg b/gitee_pomodoro/images/pomo_foresr.jpeg new file mode 100644 index 0000000..265bef8 Binary files /dev/null and b/gitee_pomodoro/images/pomo_foresr.jpeg differ diff --git a/gitee_pomodoro/images/pomo_green.jpeg b/gitee_pomodoro/images/pomo_green.jpeg new file mode 100644 index 0000000..9517fee Binary files /dev/null and b/gitee_pomodoro/images/pomo_green.jpeg differ diff --git a/gitee_pomodoro/images/pomo_leaf.jpeg b/gitee_pomodoro/images/pomo_leaf.jpeg new file mode 100644 index 0000000..fef0e27 Binary files /dev/null and b/gitee_pomodoro/images/pomo_leaf.jpeg differ diff --git a/gitee_pomodoro/images/pomo_light.jpeg b/gitee_pomodoro/images/pomo_light.jpeg new file mode 100644 index 0000000..7b30a8b Binary files /dev/null and b/gitee_pomodoro/images/pomo_light.jpeg differ diff --git a/gitee_pomodoro/notification.html b/gitee_pomodoro/notification.html new file mode 100644 index 0000000..cfaac01 --- /dev/null +++ b/gitee_pomodoro/notification.html @@ -0,0 +1,9 @@ + + +

播放歌曲时的一些不错的文字。

<音频自动播放> + + + + diff --git a/gitee_pomodoro/popup.html b/gitee_pomodoro/popup.html index f0b36cc..1301838 100644 --- a/gitee_pomodoro/popup.html +++ b/gitee_pomodoro/popup.html @@ -25,18 +25,20 @@ -
专注模式
+
00:00
- -
开始
-
暂停
-
重置
+
+ + + + +
- +