diff --git a/Timer/Background/background.js b/Timer/Background/background.js new file mode 100644 index 00000000..13066f08 --- /dev/null +++ b/Timer/Background/background.js @@ -0,0 +1,20 @@ +var secondsLeft + +chrome.storage.local.set({'isTimerRunning': 0}) +chrome.storage.local.set({'isTimerIdle': 1}) + +const options = { + type: "basic", + title: "AlarmClock", + message: `Now the time is:${new Date().getHours()}:${new Date().getMinutes()}`, + iconUrl: "logo.png" + }; + +chrome.alarms.onAlarm.addListener( + function(alarm){ + if (alarm.name == 'TimerAlarm'){ + chrome.storage.local.set({'isTimerRunning': 0}) + chrome.alarms.clear('TimerAlarm') + } + } +); diff --git a/Timer/Icons/logo128.png b/Timer/Icons/logo128.png new file mode 100644 index 00000000..6ba3b778 Binary files /dev/null and b/Timer/Icons/logo128.png differ diff --git a/Timer/Icons/logo64.png b/Timer/Icons/logo64.png new file mode 100644 index 00000000..0a9a94c6 Binary files /dev/null and b/Timer/Icons/logo64.png differ diff --git a/Timer/Popup/popup.html b/Timer/Popup/popup.html new file mode 100644 index 00000000..594ea35c --- /dev/null +++ b/Timer/Popup/popup.html @@ -0,0 +1,41 @@ + + + + + + +
+
+
+
+ +

HH

+
+

:

+
+ +

MM

+
+

:

+
+ +

SS

+
+
+ +

Please insert valid time values

+
+
+

Timer is running

+

00h 00m 00s

+
+
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/Timer/Popup/popup.js b/Timer/Popup/popup.js new file mode 100644 index 00000000..ebea0ddf --- /dev/null +++ b/Timer/Popup/popup.js @@ -0,0 +1,125 @@ +var timeInSeconds +var Hour, Minute, Second +var timeLeft +var loaderLength +var totalTime +var timeString = document.getElementById('timestring') +var inputScreen = document.getElementById('inputwrapper') +var timerScreen = document.getElementById('timerwrapper') +var hourInput = document.getElementById('hours') +var minuteInput = document.getElementById('minutes') +var secondInput = document.getElementById('seconds') +var inputError = document.getElementById('error') +var startButton = document.getElementById('startbutton') +var timerMessage = document.getElementById('timermessage') +var resetButton = document.getElementById('resetbutton') +var loadBar = document.getElementById('loader') + + +startButton.addEventListener('click', clickStart); +resetButton.addEventListener('click', clickReset); + + + +//State Update Code Starts Here -> +setInterval(function (){ + chrome.storage.local.get(['isTimerIdle', 'isTimerRunning'], (result) => { + if(result.isTimerIdle){ + inputScreen.classList.remove('hide'); + timerScreen.classList.add('hide'); + } + else { + inputScreen.classList.add('hide'); + timerScreen.classList.remove('hide'); + if (result.isTimerRunning) { + timerMessage.innerHTML = "Timer is running"; + } + else { + timerMessage.innerHTML = "Time is up" + } + } + }) //fetch storage data + + +},1000) + + +//TimeUpdate Code Starts Here -> +setInterval(function (){ + chrome.alarms.get('TimerAlarm', function(alarms) { + if (alarms != null) { + chrome.storage.local.get(['timeInSeconds'], (result) => { + totalTime = result.timeInSeconds; + }) + var now = new Date().getTime(); + var countDownTime = alarms.scheduledTime; + var distance = countDownTime - now; + if(distance > 0){ + timeLeft = generateTimeString(Math.floor(distance / 1000)); + loaderLength = (distance * 296) / (totalTime*1000); + } + } + else { + timeLeft = '00h 00m 00s'; + loaderLength = 0; + } + }) + + timeString.innerHTML = timeLeft; + loadBar.style["width"] = loaderLength + 'px'; + + + +},50) + + + +function clickReset(){ + chrome.storage.local.set({'isTimerRunning': 0}) + chrome.storage.local.set({'isTimerIdle': 1}); + chrome.alarms.clear('TimerAlarm'); + inputScreen.classList.remove('hide'); + timerScreen.classList.add('hide'); +} + + +function clickStart(){ + if ((hourInput.value == 0 && minuteInput.value == 0 && secondInput.value == 0) || (hourInput.value < 0 || minuteInput.value < 0 || secondInput.value < 0)){ + inputError.classList.remove('hide'); + } + else{ + + inputError.classList.add('hide') + + inputScreen.classList.add('hide'); + timerScreen.classList.remove('hide'); + timeInSeconds = hourInput.value * 3600 + minuteInput.value * 60 + secondInput.value * 1; + chrome.storage.local.set({'timeInSeconds': timeInSeconds}) + console.log(timeInSeconds); + + chrome.alarms.create( + 'TimerAlarm', + {when: Date.now() + timeInSeconds * 1000} + ) + + chrome.storage.local.set({'isTimerRunning': 1}) + chrome.storage.local.set({'isTimerIdle': 0}); + console.log('clickstarted'); + } +} + + +function generateTimeString(time){ + Hour = Math.floor(time / 3600); + Minute = Math.floor((time % 3600) / 60); + Second = Math.floor((time % 3600) % 60); + var s = doubleDigitString(Hour) + 'h ' + doubleDigitString(Minute) + 'm ' + doubleDigitString(Second) + 's'; + return s; +} + + +function doubleDigitString(num){ + s = '0' + num; + return s.substr(s.length-2); +} + diff --git a/Timer/Popup/styles.css b/Timer/Popup/styles.css new file mode 100644 index 00000000..1edceb2d --- /dev/null +++ b/Timer/Popup/styles.css @@ -0,0 +1,132 @@ +@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@100;200;300;400&display=swap'); +body{ + margin: 0; + padding: 0; +} +.app-wrapper{ + width: 400px; + height: 200px; + background-color: #1a1a1a; + overflow: hidden; +} +.input-wrapper{ + + display: flex; + flex-direction: column; +} +.flex-row{ + display: flex; + flex-direction: row; + width: 100%; + padding-top: 10px; +} + +.time-input{ + display: flex; + flex-direction: column; + margin: auto; +} +.input-field{ + width: 70px; + height: 50px; + background-color: transparent; + box-sizing: border-box; +} +.field-type{ + text-align: center; + margin-top: 5px; +} +.button{ + width: 120px; + height: 40px; + margin: auto; + margin-top: 0px; + background-color: #1a1a1a; + font-size: medium; +} +.thin-border{ + border-color: white; + border-width: 1px; + border-style: solid; + border-radius: 8px; + color: white; +} +.button:hover{ + color: #1a1a1a; + background-color: white; + transition: 0.5s; +} +.button:active{ + transform: scale(0.9); +} +.small-text{ + font-family: 'Overpass', sans-serif; + color: white; + font-size: 19px; + text-align: center; + font-weight: 100; +} +.large-text{ + font-family: 'Overpass', sans-serif; + color: white; + font-size: 25px; + text-align: center; + font-weight: 100; +} + +input::-webkit-outer-spin-button{ + -webkit-appearance: none; + +} +input::-webkit-inner-spin-button{ + -webkit-appearance: none; + +} +@keyframes pop-up { + 0% { + transform: scale(0.9); + } + 100% { + transform: scale(1); + } +} +.timer-wrapper{ + /* display: none; */ + display: flex; + flex-direction: column; +} +.time-left{ + margin-top: 0px; +} +.error-msg{ + color: red; + animation: pop-up 0.1s linear; +} +.loading-bar{ + width: 300px; + height: 10px; + position: relative; + top: -20px; + margin: auto; + margin-top: 0; + border-color: white; + border-width: 1px; + border-style: solid; + border-radius: 3px; + color: white; +} + +.loader{ + height: 6px; + position: relative; + top: 2px; + left: 2px; + width: 200px; + background-color: white; + float: left; + border-radius: 2px; +} + +.hide{ + display:none; +} diff --git a/Timer/Preview/1_Idle.png b/Timer/Preview/1_Idle.png new file mode 100644 index 00000000..0288a411 Binary files /dev/null and b/Timer/Preview/1_Idle.png differ diff --git a/Timer/Preview/1_Input.png b/Timer/Preview/1_Input.png new file mode 100644 index 00000000..46baeac5 Binary files /dev/null and b/Timer/Preview/1_Input.png differ diff --git a/Timer/Preview/2_Error.png b/Timer/Preview/2_Error.png new file mode 100644 index 00000000..e0825c8f Binary files /dev/null and b/Timer/Preview/2_Error.png differ diff --git a/Timer/Preview/3_Running.png b/Timer/Preview/3_Running.png new file mode 100644 index 00000000..9da72ea4 Binary files /dev/null and b/Timer/Preview/3_Running.png differ diff --git a/Timer/Preview/3_Running_2.png b/Timer/Preview/3_Running_2.png new file mode 100644 index 00000000..5bed82d8 Binary files /dev/null and b/Timer/Preview/3_Running_2.png differ diff --git a/Timer/Preview/4_End.png b/Timer/Preview/4_End.png new file mode 100644 index 00000000..8fac79f7 Binary files /dev/null and b/Timer/Preview/4_End.png differ diff --git a/Timer/README.md b/Timer/README.md new file mode 100644 index 00000000..102c6a5c --- /dev/null +++ b/Timer/README.md @@ -0,0 +1,50 @@ + +# Timer: A chrome extension + +A timer chrome extension for multipurpose use. + +## Features + +- `Start Timer` and `Reset` buttons to control the functionality. + + + +## Deployment + +To deploy this extension: + +- Turn on developers option in chrome extension settings. +- Select `Load Unpacked` and then navigate to the source code directory. + +## Issues to be resolved + +These are some known issues that could be resolved in the future: + +- [ ] UI glitch that can cause the `Set timer` screen to flash even when the timer is running. +- [ ] Automatic popup of the extension once the timer has completed running. (To be implemented) +- [ ] Sounds to be added to button press and timer completion for better UX. +- [ ] Better UI could be implemented, although the focus should be on ultra-minimalism. + +## Previews + +### Idle +![Idle](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/1_Idle.png) + +### Input +![Input](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/1_Input.png) + + + +### Running +![Running1](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/3_Running.png) +![Running2](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/3_Running_2.png) + +### End +![End](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/4_End.png) + +### Error +![Error](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/2_Error.png) + + + +### Designed and Developed by [DarkFalc0n](https://github.com/DarkFalc0n) diff --git a/Timer/manifest.json b/Timer/manifest.json new file mode 100644 index 00000000..2c642d70 --- /dev/null +++ b/Timer/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "Timer for Developers", + "description": " A timer extension for multipurpose use.", + "version": "1.0.0", + "manifest_version": 3, + "permissions": ["storage","activeTab","scripting","tabs","alarms","notifications"] , + "action": { + "default_popup": "Popup/popup.html", + "default_icon": { + "64": "Icons/logo64.png", + "128": "Icons/logo128.png" + } + }, + "background": { + "service_worker": "Background/background.js" + } + + +} \ No newline at end of file