diff --git a/index.html b/index.html index b64b0de..86a2c86 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Гринтаймер + MetaTimer
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index e613ab4..e5c8f14 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -1,6 +1,6 @@ button.button { - width: 48px; - height: 48px; + min-width: 48px; + min-height: 48px; border-radius: 8px; background-color: #AB71ED; color: #FFFFFF; diff --git a/src/components/Timer/Timer.module.css b/src/components/Timer/Timer.module.css index 03bff9d..c1dca56 100644 --- a/src/components/Timer/Timer.module.css +++ b/src/components/Timer/Timer.module.css @@ -47,6 +47,29 @@ transform: translateY(4px); } +.dates_container { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 16px; +} + +.dates_item { + display: flex; + justify-content: center; + color: black; + border-radius: 16px; + border-color: #DCC3F8; + border-width: 4px; + border-style: solid; + padding: 8px; + width: 100%; + + font-family: 'Montserrat'; + font-weight: bold; + font-size: 24px; +} + .presets_buttons { display: flex; flex-direction: row; diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index b4a3b69..c026b81 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -6,12 +6,30 @@ import styles from './Timer.module.css' const Timer = () => { const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0)) const [remainingTime, setRemainingTime] = useState({ minutes: 0, seconds: 0 }); + const [startDate, setStartDate] = useState('00:00'); + const [endDate, setEndDate] = useState('00:00'); + + const formatTime = (date: Date) => { + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + return `${hours}:${minutes}`; + }; useEffect(() => { timeManager.start() console.log("timer started") const interval = setInterval(() => { - setRemainingTime(timeManager.getRemainingTime()) + setRemainingTime(timeManager.getRemainingTime()); + let startString = formatTime(timeManager.getStartDate()); + let endString = formatTime(timeManager.getEndDate()); + if (startString === endString) { + setStartDate('00:00'); + setEndDate('00:00'); + } + else { + setStartDate(startString); + setEndDate(endString); + } }, 100); return () => { @@ -29,14 +47,22 @@ const Timer = () => {
-
-
{remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds}
+
+
+ {startDate} +
+
+ {endDate} +
+