From 28a6f1b6866c541b51ed2c360488f126ed7a3a97 Mon Sep 17 00:00:00 2001 From: mawasielewski0 <161309699+mawasielewski0@users.noreply.github.com> Date: Fri, 15 Mar 2024 18:52:48 +0000 Subject: [PATCH 1/4] Add files via upload --- sidePrevious.css | 90 ++++++++++++++++++++++++++++++++++++++++++++++++ sidePrevious.js | 27 +++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 sidePrevious.css create mode 100644 sidePrevious.js diff --git a/sidePrevious.css b/sidePrevious.css new file mode 100644 index 0000000..fdcc429 --- /dev/null +++ b/sidePrevious.css @@ -0,0 +1,90 @@ +.side-widget { + width: 350px; + height: 450px; + border-radius: 25px; + background-color: rgba(246, 246, 246, 0.5); + + box-shadow: 0 6px 60px 5px rgba(0, 0, 0, 0.75); + backdrop-filter: blur(10px); + + color: #000; + + display: flex; + flex-flow: column; + justify-content: flex-start; + + position: absolute; + top: 25vh; + right: 5rem; +} +.side-widget-header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + + font-size: 20px; + font-weight: 400; + + width: 90%; + margin-top: 2rem; + margin-left: 5%; +} + +.side-widget-location { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} + +.side-widget-safety-status { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + color: #53BB2F; +} + +.side-widget-body { + margin-top: 2rem; + display: flex; + align-items: center; + justify-content: flex-start; + max-height: 200px; +} + +.side-widget-temperature { + margin-left: 5rem; + font-size: 180px; + font-weight: 800; + + display: flex; + align-items: center; + justify-content: flex-start; +} + +.side-widget-degree-sign { + margin-top: -80px; + font-size: 64px; + font-weight: 800; +} + +.side-widget-footer { + margin-left: 5.5rem; + + display: flex; + align-items: center; + gap: 4px; + + color: #747474; + font-weight: 400; + font-size: 20px; +} + +.side-widget-vertical-separator { + font-size: 14px; + color: #909090; + margin-left: 0.5rem; + margin-right: 0.5rem; +} \ No newline at end of file diff --git a/sidePrevious.js b/sidePrevious.js new file mode 100644 index 0000000..e5afda2 --- /dev/null +++ b/sidePrevious.js @@ -0,0 +1,27 @@ +import React from 'react'; + +function PreviousWeatherWidget() { + // Placeholder + const previousWeather = [ + { date: '2024-03-14', temperature: '15°C', condition: 'Windy' }, + { date: '2024-03-13', temperature: '13°C', condition: 'Light Rain' }, + { date: '2024-03-12', temperature: '12°C', condition: 'Heavy Rain' } + ]; + + return ( +
+

Previous Day's Weather

+ +
+ ); +} + +export default PreviousWeatherWidget; \ No newline at end of file From 732921970910a556f2dc8965b5cccfcec163745b Mon Sep 17 00:00:00 2001 From: mawasielewski0 <161309699+mawasielewski0@users.noreply.github.com> Date: Fri, 15 Mar 2024 19:05:57 +0000 Subject: [PATCH 2/4] Add files via upload --- src/components/sidePrevious.css | 90 +++++++++++++++++++++++++++++++++ src/components/sidePrevious.js | 35 +++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 src/components/sidePrevious.css create mode 100644 src/components/sidePrevious.js diff --git a/src/components/sidePrevious.css b/src/components/sidePrevious.css new file mode 100644 index 0000000..fdcc429 --- /dev/null +++ b/src/components/sidePrevious.css @@ -0,0 +1,90 @@ +.side-widget { + width: 350px; + height: 450px; + border-radius: 25px; + background-color: rgba(246, 246, 246, 0.5); + + box-shadow: 0 6px 60px 5px rgba(0, 0, 0, 0.75); + backdrop-filter: blur(10px); + + color: #000; + + display: flex; + flex-flow: column; + justify-content: flex-start; + + position: absolute; + top: 25vh; + right: 5rem; +} +.side-widget-header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + + font-size: 20px; + font-weight: 400; + + width: 90%; + margin-top: 2rem; + margin-left: 5%; +} + +.side-widget-location { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} + +.side-widget-safety-status { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + color: #53BB2F; +} + +.side-widget-body { + margin-top: 2rem; + display: flex; + align-items: center; + justify-content: flex-start; + max-height: 200px; +} + +.side-widget-temperature { + margin-left: 5rem; + font-size: 180px; + font-weight: 800; + + display: flex; + align-items: center; + justify-content: flex-start; +} + +.side-widget-degree-sign { + margin-top: -80px; + font-size: 64px; + font-weight: 800; +} + +.side-widget-footer { + margin-left: 5.5rem; + + display: flex; + align-items: center; + gap: 4px; + + color: #747474; + font-weight: 400; + font-size: 20px; +} + +.side-widget-vertical-separator { + font-size: 14px; + color: #909090; + margin-left: 0.5rem; + margin-right: 0.5rem; +} \ No newline at end of file diff --git a/src/components/sidePrevious.js b/src/components/sidePrevious.js new file mode 100644 index 0000000..a70fe32 --- /dev/null +++ b/src/components/sidePrevious.js @@ -0,0 +1,35 @@ +import React from 'react'; +import './sidePrevious.css' +import windyimg from '../../assets/icons/ui/windyWeather.png' +import sunnyimg from '../../assets/icons/ui/sunnyWeather.png' +import stormyimg from '../../assets/icons/ui/stormyWeather.png' +import lrainimg from '../../assets/icons/ui/lrainWeather.png' +import hrainimg from '../../assets/icons/ui/hrainWeather.png' +import partlycloudyimg from '../../assets/icons/ui/partlycloudyWeather.png' +import snowyimg from '../../assets/icons/ui/snowyWeather.png' + +function PreviousWeatherWidget() { + // Placeholder + const previousWeather = [ + { date: '2024-03-14', temperature: '15°C', condition: 'Windy' }, + { date: '2024-03-13', temperature: '13°C', condition: 'Light Rain' }, + { date: '2024-03-12', temperature: '12°C', condition: 'Heavy Rain' } + ]; + + return ( +
+

Previous Day's Weather

+ +
+ ); +} + +export default PreviousWeatherWidget; \ No newline at end of file From 0714f36fe753b85d8d301c234b5fb1c157de6368 Mon Sep 17 00:00:00 2001 From: mawasielewski0 <161309699+mawasielewski0@users.noreply.github.com> Date: Sat, 16 Mar 2024 00:49:29 +0000 Subject: [PATCH 3/4] Update sidePrevious.js --- src/components/sidePrevious.js | 39 ++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/src/components/sidePrevious.js b/src/components/sidePrevious.js index a70fe32..2959325 100644 --- a/src/components/sidePrevious.js +++ b/src/components/sidePrevious.js @@ -9,27 +9,40 @@ import partlycloudyimg from '../../assets/icons/ui/partlycloudyWeather.png' import snowyimg from '../../assets/icons/ui/snowyWeather.png' function PreviousWeatherWidget() { - // Placeholder + function getPreviousDays() { + const today = new Date(); + const previousDays = []; + + for (let i = 1; i <= 3; i++) { + const previousDay = new Date(today); + previousDay.setDate(today.getDate() - i); + previousDays.push(previousDay.toISOString().split('T')[0]); + } + + return previousDays; + } + const previousWeather = [ - { date: '2024-03-14', temperature: '15°C', condition: 'Windy' }, - { date: '2024-03-13', temperature: '13°C', condition: 'Light Rain' }, - { date: '2024-03-12', temperature: '12°C', condition: 'Heavy Rain' } + { date: getPreviousDays()[0], rainfall: '0 mm', condition: 'Windy' }, + { date: getPreviousDays()[1], rainfall: '6 mm', condition: 'Light Rain' }, + { date: getPreviousDays()[2], rainfall: '16 mm', condition: 'Heavy Rain' } ]; return ( -
-

Previous Day's Weather

- +
); } -export default PreviousWeatherWidget; \ No newline at end of file +export default PreviousWeatherWidget; From af0f6c21f5ca932d68f3a39f5be6090418e68a6d Mon Sep 17 00:00:00 2001 From: mawasielewski0 <161309699+mawasielewski0@users.noreply.github.com> Date: Sat, 16 Mar 2024 00:50:03 +0000 Subject: [PATCH 4/4] Update sidePrevious.css --- src/components/sidePrevious.css | 86 +++++++++------------------------ 1 file changed, 22 insertions(+), 64 deletions(-) diff --git a/src/components/sidePrevious.css b/src/components/sidePrevious.css index fdcc429..3b8b6a0 100644 --- a/src/components/sidePrevious.css +++ b/src/components/sidePrevious.css @@ -17,74 +17,32 @@ top: 25vh; right: 5rem; } -.side-widget-header { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; - - font-size: 20px; - font-weight: 400; - - width: 90%; - margin-top: 2rem; - margin-left: 5%; -} - -.side-widget-location { - display: flex; - align-items: center; - justify-content: center; - gap: 4px; -} - -.side-widget-safety-status { - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - color: #53BB2F; -} -.side-widget-body { - margin-top: 2rem; - display: flex; - align-items: center; - justify-content: flex-start; - max-height: 200px; +.side-widget-heading { + text-align: center; + font-size: 24px; + font-weight: bold; + margin-top: 20px; } -.side-widget-temperature { - margin-left: 5rem; - font-size: 180px; - font-weight: 800; - - display: flex; - align-items: center; - justify-content: flex-start; +.previous-day-container { + text-align: center; + font-size: 24px; + font-weight: bold; + margin-top: 20px; } - -.side-widget-degree-sign { - margin-top: -80px; - font-size: 64px; - font-weight: 800; +.previous-day-layout { + padding: 10px; + border-bottom: 1px solid #ccc; + width: 80%; + max-width: 300px; + text-align: center; + margin-bottom: 10px; } -.side-widget-footer { - margin-left: 5.5rem; - - display: flex; - align-items: center; - gap: 4px; - - color: #747474; - font-weight: 400; - font-size: 20px; +.previous-day-img { + width: 50px; + height: auto; + margin-right: 10px; + border-radius: 50%; } - -.side-widget-vertical-separator { - font-size: 14px; - color: #909090; - margin-left: 0.5rem; - margin-right: 0.5rem; -} \ No newline at end of file