diff --git a/pomodoro/index.html b/pomodoro/index.html
index 93ae847d..b2f99650 100644
--- a/pomodoro/index.html
+++ b/pomodoro/index.html
@@ -2,6 +2,7 @@
+
CodePen - Pomodoro Timer
diff --git a/pomodoro/script.js b/pomodoro/script.js
index b79520fd..d93f2153 100644
--- a/pomodoro/script.js
+++ b/pomodoro/script.js
@@ -1,6 +1,31 @@
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
+// Notion Background Theme Detection
+(function(){
+ function setBodyBackground(){
+ try{
+ const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ document.body.style.background = isDark ? '#191919' : '#ffffff';
+ } catch(e) {
+ document.body.style.background = '#ffffff';
+ }
+ }
+ if(window.matchMedia){
+ window.matchMedia('(prefers-color-scheme: dark)').addListener(setBodyBackground);
+ }
+ setBodyBackground();
+})();
+
+// Theme options: "default", "alternative", "lofi-night"
+const selectedTheme = "lofi-night";
+
+if (selectedTheme && selectedTheme !== "default") {
+ document.body.dataset.theme = selectedTheme;
+} else {
+ document.body.removeAttribute("data-theme");
+}
+
const SESSION = "Session";
const BREAK = "Break";
const SESSIONLEN = 25;
@@ -240,44 +265,66 @@ class SetTimerLength extends React.Component {
class Timer extends React.Component {
- constructor(props) {
- super(props);
- this.buttonRefStartStop = React.createRef();
- this.buttonRefReset = React.createRef();
+constructor(props) {
+ super(props);
+ this.buttonRefStartStop = React.createRef();
+ this.buttonRefReset = React.createRef();
+ this.buttonRefTheme = React.createRef();
+}
+
+toggleTheme() {
+ const themes = ["default", "alternative", "lofi-night"];
+ const currentTheme = document.body.dataset.theme || "default";
+ const currentIndex = themes.indexOf(currentTheme);
+ const nextIndex = (currentIndex + 1) % themes.length;
+ const nextTheme = themes[nextIndex];
+
+ if (nextTheme === "default") {
+ document.body.removeAttribute("data-theme");
+ } else {
+ document.body.dataset.theme = nextTheme;
}
+}
- render() {
- return /*#__PURE__*/(
- React.createElement("div", null, /*#__PURE__*/
- React.createElement("div", { id: "time-left" }, this.props.timeLeft), /*#__PURE__*/
- React.createElement("div", { id: "display-controls" }, /*#__PURE__*/
- React.createElement("div", { id: "timer-label" }, this.props.timerType), /*#__PURE__*/
- React.createElement("div", { id: "timer-ssr" }, /*#__PURE__*/
- React.createElement("button", {
- ref: this.buttonRefStartStop,
- id: "start-stop",
- onClick: () => {
- this.props.toggleStartStopTimer();
- this.buttonRefStartStop.current.blur();
- } }, /*#__PURE__*/
+render() {
+ return /*#__PURE__*/(
+ React.createElement("div", null, /*#__PURE__*/
+ React.createElement("div", { id: "time-left" }, this.props.timeLeft), /*#__PURE__*/
+ React.createElement("div", { id: "display-controls" }, /*#__PURE__*/
+ React.createElement("button", {
+ ref: this.buttonRefStartStop,
+ id: "start-stop",
+ onClick: () => {
+ this.props.toggleStartStopTimer();
+ this.buttonRefStartStop.current.blur();
+ } }, /*#__PURE__*/
- React.createElement("i", { className: this.props.stopStartTimer, "aria-hidden": "true" })), /*#__PURE__*/
+ React.createElement("i", { className: this.props.stopStartTimer, "aria-hidden": "true" })), /*#__PURE__*/
- React.createElement("button", {
- ref: this.buttonRefReset,
- id: "reset",
- onClick: () => {
- this.props.resetTimer();
- this.buttonRefReset.current.blur();
- } }, /*#__PURE__*/
+ React.createElement("button", {
+ ref: this.buttonRefReset,
+ id: "reset",
+ onClick: () => {
+ this.props.resetTimer();
+ this.buttonRefReset.current.blur();
+ } }, /*#__PURE__*/
- React.createElement("i", { className: "fa fa-refresh", "aria-hidden": "true" }))))));
+ React.createElement("i", { className: "fa fa-refresh", "aria-hidden": "true" })), /*#__PURE__*/
+ React.createElement("button", {
+ ref: this.buttonRefTheme,
+ id: "theme-toggle",
+ onClick: () => {
+ this.toggleTheme();
+ this.buttonRefTheme.current.blur();
+ } }, /*#__PURE__*/
+ React.createElement("i", { className: "fa fa-paint-brush", "aria-hidden": "true" })))));
- }}
+
+}}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
\ No newline at end of file
diff --git a/pomodoro/style.css b/pomodoro/style.css
index 73951ca8..6cf39574 100644
--- a/pomodoro/style.css
+++ b/pomodoro/style.css
@@ -2,45 +2,86 @@
/* General */
+:root {
+ --text-color: #111111;
+ --card-bg: rgb(240, 240, 190);
+ --panel-bg: rgb(150, 180, 175);
+ --panel-shadow: rgb(121, 145, 141);
+ --accent: rgb(234, 178, 156);
+ --accent-shadow: rgb(194, 91, 44);
+ --card-shadow: sienna;
+}
+
+body[data-theme="alternative"] {
+ --text-color: #e8e6e3;
+ --card-bg: #2b2b2b;
+ --panel-bg: #3a3f44;
+ --panel-shadow: #1f2326;
+ --accent: #d98c5f;
+ --accent-shadow: #a8683b;
+ --card-shadow: #5a3a22;
+}
+
+/* Lo-Fi Night Theme - Inspired by cozy night cityscape */
+body[data-theme="lofi-night"] {
+ --text-color: #e0fbfc;
+ --card-bg: #1b263b;
+ --panel-bg: #0d1b2a;
+ --panel-shadow: #051923;
+ --accent: #ff6b6b;
+ --accent-shadow: #c1121f;
+ --card-shadow: #0a1628;
+}
+
body {
font-family: 'Roboto Mono', monospace;
- // background-color: #c2e6e8;
+ background: transparent;
+ color: var(--text-color);
+ margin: 0;
+ padding: 0;
}
#root {
display: flex;
align-items: center;
justify-content: center;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
}
button,
button:active {
- background-color: rgb(234,178,156);
+ background-color: var(--accent);
border: none;
width: 42px;
height: 40px;
border-radius: 100%;
text-align: center;
- box-shadow: 0.2em 0.2em rgb(194, 91, 44);
- -webkit-box-shadow: 0.2em 0.2em rgb(194, 91, 44);
- -moz-box-shadow: 0.2em 0.2em rgb(194, 91, 44);
+ box-shadow: 0.2em 0.2em var(--accent-shadow);
+ -webkit-box-shadow: 0.2em 0.2em var(--accent-shadow);
+ -moz-box-shadow: 0.2em 0.2em var(--accent-shadow);
+ cursor: pointer;
}
button:focus {
translate: 0.2em 0.2em;
- box-shadow: 0.2em 0.2em rgb(194, 91, 44) inset;
- -webkit-box-shadow: 0.2em 0.2em rgb(194, 91, 44) inset;
- -moz-box-shadow: 0.2em 0.2em rgb(194, 91, 44) inset;
+ box-shadow: 0.2em 0.2em var(--accent-shadow) inset;
+ -webkit-box-shadow: 0.2em 0.2em var(--accent-shadow) inset;
+ -moz-box-shadow: 0.2em 0.2em var(--accent-shadow) inset;
}
/* Clock Body */
.clock-container {
- background-color: rgb(240, 240, 190);
+ background-color: var(--card-bg);
width: 350px;
+ max-width: 100%;
border-radius: 20px;
padding: 30px;
- box-shadow: 10px 10px sienna;
+ box-shadow: 10px 10px var(--card-shadow);
+ box-sizing: border-box;
}
/* Display + Stop/Start/Reset Controls */
@@ -48,10 +89,10 @@ button:focus {
#time-left {
font-size: 70px;
text-align: center;
- background-color: rgb(150,180,175);
+ background-color: var(--panel-bg);
padding: 20px;
border-radius: 20px;
- box-shadow: 3px 3px rgb(121, 145, 141) inset;
+ box-shadow: 3px 3px var(--panel-shadow) inset;
}
#display-controls {
@@ -59,26 +100,28 @@ button:focus {
display: flex;
flex-direction: row;
align-items: center;
- justify-content: space-between;
+ justify-content: center;
+ gap: 15px;
}
#timer-label {
font-size: 25px;
text-align: center;
padding-top: 2px;
- background-color: rgb(150,180,175);
+ background-color: var(--panel-bg);
border-radius: 10px;
height: 40px;
flex: 2;
- box-shadow: 3px 3px rgb(121, 145, 141) inset;
+ box-shadow: 3px 3px var(--panel-shadow) inset;
}
#timer-ssr {
flex: 1;
margin-left: 30px;
display: flex;
- justify-content: space-between;
- flex-start: end;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 15px;
}
/* Timer Length Controls */
@@ -87,6 +130,7 @@ button:focus {
margin-top: 20px;
display: flex;
flex-direction: row;
+ gap: 6px;
}
.inc-dec-btn-container {
@@ -94,25 +138,85 @@ button:focus {
display: flex;
flex-direction: row;
justify-content: center;
- width: 140px;
- height:60px;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ height: 60px;
}
.break-container,
.session-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
text-align: center;
-/* display: inline-block; */
- border: 2px solid rgb(234,178,156);
+ border: 2px solid var(--accent);
padding: 10px;
border-radius: 10px;
- width: 48%;
+ width: calc(50% - 3px);
+ box-sizing: border-box;
+ min-height: 140px;
+}
+
+#break-label,
+#session-label {
+ min-height: 2.6em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 4px;
}
.timer-length {
font-size: 2em;
+ margin-bottom: 10px;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 420px) {
+ .clock-container {
+ width: 100%;
+ padding: 20px;
+ box-shadow: none;
+ }
+
+ #time-left {
+ font-size: 50px;
+ padding: 15px;
+ }
+
+ #timer-label {
+ font-size: 20px;
+ }
+
+ #timer-ssr {
+ margin-left: 15px;
+ }
+
+ .length-container {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .break-container,
+ .session-container {
+ width: 100%;
+ margin-right: 0;
+ }
+
+ .break-container {
+ margin-right: 0;
+ margin-bottom: 10px;
+ }
}
-.break-container,
-.inc-arrow {
- margin-right: 12px;
+@media screen and (max-width: 320px) {
+ #time-left {
+ font-size: 40px;
+ padding: 10px;
+ }
+
+ .clock-container {
+ padding: 15px;
+ }
}
diff --git a/pomodoro2/script.js b/pomodoro2/script.js
index 2c79fb20..16ca072f 100644
--- a/pomodoro2/script.js
+++ b/pomodoro2/script.js
@@ -1,3 +1,19 @@
+// Notion Background Theme Detection
+(function(){
+ function setBodyBackground(){
+ try{
+ const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ document.body.style.background = isDark ? '#191919' : '#ffffff';
+ } catch(e) {
+ document.body.style.background = '#ffffff';
+ }
+ }
+ if(window.matchMedia){
+ window.matchMedia('(prefers-color-scheme: dark)').addListener(setBodyBackground);
+ }
+ setBodyBackground();
+})();
+
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const { Component } = React;
class App extends Component {
diff --git a/pomodoro2/style.css b/pomodoro2/style.css
index 22968c77..aae70c2b 100644
--- a/pomodoro2/style.css
+++ b/pomodoro2/style.css
@@ -1,20 +1,26 @@
#root {
background: #EEEBD0;
width: 350px;
- height: 170px;
+ max-width: 100%;
+ height: auto;
+ min-height: 170px;
margin: auto;
border-radius: 1%;
box-shadow: 5px 5px 2px #888888;
margin-top: 3px;
+ box-sizing: border-box;
+ padding: 5px;
}
body {
color: #3A3335;
font-family: VT323;
font-weight: bold;
+ background: transparent;
+ margin: 0;
+ padding: 0;
}
-
.pomodoro {
height: 70px;
display: flex;
@@ -34,6 +40,7 @@ body {
font-weight: bold;
text-align: center;
box-shadow: 3px 3px 2px #888888;
+ cursor: pointer;
}
.pomodoro button:active {
@@ -58,6 +65,7 @@ body {
.start-pause {
display: flex;
justify-content: center;
+ flex-wrap: wrap;
}
.start-pause button {
@@ -69,6 +77,7 @@ body {
box-shadow: 3px 3px 2px #888888;
width: 90px;
font-size: 25px;
+ cursor: pointer;
}
.start-pause button:active {
@@ -93,7 +102,7 @@ body {
box-shadow: 3px 3px 2px #888888;
margin-left: 115px;
width: 90px;
-
+ cursor: pointer;
}
.reset button:active {
@@ -108,6 +117,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
+ flex-wrap: wrap;
}
.break-length {
@@ -125,6 +135,7 @@ body {
border: none;
background: #DC5754;
box-shadow: 1px 1px 1px #888888;
+ cursor: pointer;
}
.break-time button:active {
@@ -139,3 +150,48 @@ body {
font-size: 20px;
padding: 5px;
}
+
+/* Responsive Design */
+@media screen and (max-width: 380px) {
+ #root {
+ width: 100%;
+ margin: 3px;
+ }
+
+ .pomodoro .timer {
+ font-size: 55px;
+ margin: 0 10px;
+ }
+
+ .start-pause button {
+ margin: 10px 5px;
+ width: 80px;
+ font-size: 22px;
+ }
+
+ .reset button {
+ margin-left: 0;
+ margin-bottom: 10px;
+ }
+
+ .contain-it {
+ flex-direction: column;
+ }
+
+ .break-length {
+ margin-left: 0;
+ margin-top: 10px;
+ }
+}
+
+@media screen and (max-width: 300px) {
+ .pomodoro .timer {
+ font-size: 45px;
+ margin: 0 5px;
+ }
+
+ .start-pause button {
+ width: 70px;
+ font-size: 20px;
+ }
+}
diff --git a/pomodoro3/script.js b/pomodoro3/script.js
index bbfcf8e7..cd479770 100644
--- a/pomodoro3/script.js
+++ b/pomodoro3/script.js
@@ -1,6 +1,22 @@
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
+// Notion Background Theme Detection
+(function(){
+ function setBodyBackground(){
+ try{
+ const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ document.body.style.background = isDark ? '#191919' : '#ffffff';
+ } catch(e) {
+ document.body.style.background = '#ffffff';
+ }
+ }
+ if(window.matchMedia){
+ window.matchMedia('(prefers-color-scheme: dark)').addListener(setBodyBackground);
+ }
+ setBodyBackground();
+})();
+
const SESSION = "Sessão";
const BREAK = "Intervalo";
const SESSIONLEN = 25;
diff --git a/pomodoro3/style.css b/pomodoro3/style.css
index 91b431be..6118c965 100644
--- a/pomodoro3/style.css
+++ b/pomodoro3/style.css
@@ -3,20 +3,26 @@
/* General */
body {
- font-family: 'Sans serif', ;
- background-color: #D1C4E9; color: #D1C4E9
+ font-family: 'Sans serif', sans-serif;
+ background: transparent;
+ color: #D1C4E9;
+ margin: 0;
+ padding: 0;
}
#root {
display: flex;
align-items: center;
justify-content: center;
- height: 100vh;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
}
button,
button:active {
- background-color: rgb (209, 196, 233);
+ background-color: rgb(209, 196, 233);
border: none;
width: 42px;
height: 40px;
@@ -25,6 +31,7 @@ button:active {
box-shadow: 0.2em 0.2em rgb(209, 196, 233);
-webkit-box-shadow: 0.2em 0.2em rgb(209, 196, 233);
-moz-box-shadow: 0.2em 0.2em rgb(209, 196, 233);
+ cursor: pointer;
}
button:focus {
@@ -39,9 +46,11 @@ button:focus {
.clock-container {
background-color: rgb(255,255,255);
width: 350px;
+ max-width: 100%;
border-radius: 20px;
padding: 30px;
- box-shadow: 10px 10px lilás;
+ box-shadow: 10px 10px #D1C4E9;
+ box-sizing: border-box;
}
/* Display + Stop/Start/Reset Controls */
@@ -64,22 +73,24 @@ button:focus {
}
#timer-label {
- font-size: 27px; color: #EDECE9;
+ font-size: 27px;
+ color: #EDECE9;
text-align: center;
padding-top: 10px;
background-color: rgb(209, 196, 233);
border-radius: 10px;
height: 40px;
flex: 2;
- box-shadow: 3px 3px rgb() inset;
+ box-shadow: 3px 3px rgb(180, 167, 204) inset;
}
#timer-ssr {
flex: 1;
margin-left: 30px;
display: flex;
- justify-content: space-between;
- flex-start: end;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 15px;
}
/* Timer Length Controls */
@@ -88,6 +99,7 @@ button:focus {
margin-top: 20px;
display: flex;
flex-direction: row;
+ gap: 6px;
}
.inc-dec-btn-container {
@@ -95,25 +107,88 @@ button:focus {
display: flex;
flex-direction: row;
justify-content: center;
- width: 140px;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
height: 60px;
}
.break-container,
.session-container {
- text-align: center;
-/* display: inline-block; */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: center;
border: 2px solid rgb(209, 196, 233);
padding: 10px;
border-radius: 10px;
- width: 50%;
+ width: calc(50% - 3px);
+ box-sizing: border-box;
+ min-height: 140px;
+}
+
+#break-label,
+#session-label {
+ min-height: 2.6em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 4px;
}
.timer-length {
font-size: 2em;
+ margin-bottom: 10px;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 420px) {
+ .clock-container {
+ width: 100%;
+ padding: 20px;
+ }
+
+ #time-left {
+ font-size: 50px;
+ padding: 15px;
+ }
+
+ #timer-label {
+ font-size: 22px;
+ }
+
+ #timer-ssr {
+ margin-left: 15px;
+ }
+
+ .length-container {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .break-container,
+ .session-container {
+ width: 100%;
+ margin-right: 0;
+ }
+
+ .break-container {
+ margin-right: 0;
+ margin-bottom: 10px;
+ }
}
-.break-container,
-.inc-arrow {
- margin-right: 12px;
+@media screen and (max-width: 320px) {
+ #time-left {
+ font-size: 40px;
+ padding: 10px;
+ }
+
+ .clock-container {
+ padding: 15px;
+ }
+
+ #timer-label {
+ font-size: 18px;
+ }
}
\ No newline at end of file