From 73f27bd99fd888a30858f5267be9a912d50dacd4 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 16:18:05 +0200
Subject: [PATCH 1/9] Add Carbon Footprint

---
 src/pages/history.tsx  |  2 +-
 src/pages/overview.tsx | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/pages/history.tsx b/src/pages/history.tsx
index a4b096b..129fded 100644
--- a/src/pages/history.tsx
+++ b/src/pages/history.tsx
@@ -12,4 +12,4 @@ export default function History(): ReactElement {
       </div>
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index ce65cf9..2052160 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -1,11 +1,13 @@
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
 
 export default function Overview(): ReactElement {
+  const [isHovered, setIsHovered] = useState(false);
   return (
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">Overview</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-8 gap-16 ">
+        {/* Real-Time summary */}
         <div className="flex flex-col gap-8 bg-white rounded-lg shadow p-7 dark:bg-slate-700 transition-all duration-500">
           <div>
             <h3 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
@@ -77,6 +79,33 @@ export default function Overview(): ReactElement {
             </div>
           </div>
         </div>
+
+        {/* Carbon Footprint */}
+        <div className="flex flex-col gap-8 bg-white rounded-lg shadow p-7 dark:bg-slate-700 transition-all duration-500">
+          <div>
+            <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
+              Carbon Footprint
+            </h2>
+              <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+                <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">More info</button>
+                {isHovered && (
+                  <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
+                    <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),
+                        nitrous oxide (N2O), and others, caused by energy consumption. These gasses are combined into a common unit called carbon
+                        dioxide equivalent (CO2e), based on their global warming potential. The value for the carbon footprint is measured 
+                        by: kW * 1h * 0.5kg CO2/kWh
+                    </p>
+                  </div>
+                )}
+              </div>
+            <h4 className="text-lg text-gray-500 dark:text-slate-400 font-semibold">
+              Total Carbon Footprint
+            </h4>
+            <p className="mt-2 text-center text-5xl text-green-800 font-bold">
+              1kg CO2e
+            </p>
+          </div>
+        </div>
       </div>
     </>
   )

From 16a1ef6ed3f5918c79bdba6b59dc9422c373ef1c Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 16:47:13 +0200
Subject: [PATCH 2/9] Fixing style

---
 src/pages/history.tsx  |  1 +
 src/pages/overview.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/history.tsx b/src/pages/history.tsx
index 129fded..f83dee8 100644
--- a/src/pages/history.tsx
+++ b/src/pages/history.tsx
@@ -12,4 +12,5 @@ export default function History(): ReactElement {
       </div>
     </>
   )
+
 }
\ No newline at end of file
diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index 2052160..100305d 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -1,7 +1,7 @@
 import { ReactElement, useState } from 'react'
 
 export default function Overview(): ReactElement {
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = useState(false)
   return (
     <>
       <h2 className="text-xl font-bold dark:text-slate-300">Overview</h2>
@@ -88,15 +88,15 @@ export default function Overview(): ReactElement {
             </h2>
               <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
                 <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">More info</button>
-                {isHovered && (
-                  <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
-                    <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),
+              {isHovered && (
+                <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
+                  <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),
                         nitrous oxide (N2O), and others, caused by energy consumption. These gasses are combined into a common unit called carbon
                         dioxide equivalent (CO2e), based on their global warming potential. The value for the carbon footprint is measured 
                         by: kW * 1h * 0.5kg CO2/kWh
-                    </p>
-                  </div>
-                )}
+                  </p>
+                </div>
+              )}
               </div>
             <h4 className="text-lg text-gray-500 dark:text-slate-400 font-semibold">
               Total Carbon Footprint

From 321138ae320d7c9d8c57ef0961bac2e28ce7ee25 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 16:52:24 +0200
Subject: [PATCH 3/9] More style fixes

---
 src/pages/history.tsx  |  3 +--
 src/pages/overview.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/history.tsx b/src/pages/history.tsx
index f83dee8..a4b096b 100644
--- a/src/pages/history.tsx
+++ b/src/pages/history.tsx
@@ -12,5 +12,4 @@ export default function History(): ReactElement {
       </div>
     </>
   )
-
-}
\ No newline at end of file
+}
diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index 100305d..42527f5 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -86,8 +86,14 @@ export default function Overview(): ReactElement {
             <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
               Carbon Footprint
             </h2>
-              <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-                <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">More info</button>
+              <div
+                className="relative"
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}>
+
+                <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">
+                More info
+                </button>
               {isHovered && (
                 <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
                   <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),

From fc7bdf7d07e5077d0a64c2cabb927197a149f7b4 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 16:56:55 +0200
Subject: [PATCH 4/9] Further changes

---
 src/pages/overview.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index 42527f5..fd1b807 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -86,14 +86,14 @@ export default function Overview(): ReactElement {
             <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
               Carbon Footprint
             </h2>
-              <div
-                className="relative"
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => setIsHovered(false)}>
+            <div
+              className="relative"
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}>
 
-                <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">
+              <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">
                 More info
-                </button>
+              </button>
               {isHovered && (
                 <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
                   <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),

From 64b6b3cbbd8154c86f861362490e2fa7a89fe210 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 17:01:32 +0200
Subject: [PATCH 5/9] -

---
 src/pages/overview.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index fd1b807..177ee05 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -89,21 +89,23 @@ export default function Overview(): ReactElement {
             <div
               className="relative"
               onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}>
+              onMouseLeave={() => setIsHovered(false)}
+              >
 
               <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">
                 More info
               </button>
               {isHovered && (
                 <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
-                  <p>A carbon footprint is a measurement of the various greenhouse gases, such as carbon dioxide (CO2), methane (CH4),
-                        nitrous oxide (N2O), and others, caused by energy consumption. These gasses are combined into a common unit called carbon
+                  <p>   A carbon footprint is a measurement of the various
+                        greenhouse gases, such as carbon dioxide (CO2), methane
+                        (CH4), nitrous oxide (N2O), and others, caused by energy consumption. These gasses are combined into a common unit called carbon
                         dioxide equivalent (CO2e), based on their global warming potential. The value for the carbon footprint is measured 
                         by: kW * 1h * 0.5kg CO2/kWh
                   </p>
                 </div>
               )}
-              </div>
+            </div>
             <h4 className="text-lg text-gray-500 dark:text-slate-400 font-semibold">
               Total Carbon Footprint
             </h4>

From 56f031b5be54f32d27e933c92b28b7ef2caa2676 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 17:06:12 +0200
Subject: [PATCH 6/9] -

---
 src/pages/overview.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index 177ee05..468ffbf 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -90,7 +90,7 @@ export default function Overview(): ReactElement {
               className="relative"
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
-              >
+            >
 
               <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">
                 More info
@@ -99,9 +99,11 @@ export default function Overview(): ReactElement {
                 <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
                   <p>   A carbon footprint is a measurement of the various
                         greenhouse gases, such as carbon dioxide (CO2), methane
-                        (CH4), nitrous oxide (N2O), and others, caused by energy consumption. These gasses are combined into a common unit called carbon
-                        dioxide equivalent (CO2e), based on their global warming potential. The value for the carbon footprint is measured 
-                        by: kW * 1h * 0.5kg CO2/kWh
+                        (CH4), nitrous oxide (N2O), and others, caused by energy
+                        consumption. These gasses are combined into a common unit called carbon
+                        dioxide equivalent (CO2e), based on their
+                        global warming potential. The value for the carbon footprint
+                        is measured by: kW * 1h * 0.5kg CO2/kWh
                   </p>
                 </div>
               )}

From f630b4653906066066643305eb1fa8516fc1f00b Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 17:13:22 +0200
Subject: [PATCH 7/9] -

---
 src/pages/overview.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index 468ffbf..fd37f33 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -91,19 +91,20 @@ export default function Overview(): ReactElement {
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
             >
-
               <button className="bg-sky-700 text-gray-800 px-4 py-2 rounded">
                 More info
               </button>
               {isHovered && (
                 <div className="absolute bg-sky-700 text-gray-800 p-4 rounded shadow-md mt-2 dark:bg-white transition-all duration-500">
-                  <p>   A carbon footprint is a measurement of the various
-                        greenhouse gases, such as carbon dioxide (CO2), methane
-                        (CH4), nitrous oxide (N2O), and others, caused by energy
-                        consumption. These gasses are combined into a common unit called carbon
-                        dioxide equivalent (CO2e), based on their
-                        global warming potential. The value for the carbon footprint
-                        is measured by: kW * 1h * 0.5kg CO2/kWh
+                  <p>
+                    A carbon footprint is a measurement of the various
+                    greenhouse gases, such as carbon dioxide (CO2), methane
+                    (CH4), nitrous oxide (N2O), and others, caused by energy
+                    consumption. These gasses are combined into a common
+                    unit called carbon
+                    dioxide equivalent (CO2e), based on their
+                    global warming potential. The value for the carbon footprint
+                    is measured by: kW * 1h * 0.5kg CO2/kWh
                   </p>
                 </div>
               )}

From 6f1540e9176f002c789423b9f92c1d91d70485e9 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 17:15:08 +0200
Subject: [PATCH 8/9] -

---
 src/pages/overview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index fd37f33..b35ceb3 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -100,8 +100,8 @@ export default function Overview(): ReactElement {
                     A carbon footprint is a measurement of the various
                     greenhouse gases, such as carbon dioxide (CO2), methane
                     (CH4), nitrous oxide (N2O), and others, caused by energy
-                    consumption. These gasses are combined into a common
-                    unit called carbon
+                    consumption. These gasses are combined into a common unit
+                    called carbon
                     dioxide equivalent (CO2e), based on their
                     global warming potential. The value for the carbon footprint
                     is measured by: kW * 1h * 0.5kg CO2/kWh

From ecb74dbc9a8932d504b296e8a68520d92194c681 Mon Sep 17 00:00:00 2001
From: Jonitsi <Jonjun@gmail.com>
Date: Fri, 8 Dec 2023 17:16:53 +0200
Subject: [PATCH 9/9] -

---
 src/pages/overview.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
index b35ceb3..2817e4f 100644
--- a/src/pages/overview.tsx
+++ b/src/pages/overview.tsx
@@ -101,8 +101,7 @@ export default function Overview(): ReactElement {
                     greenhouse gases, such as carbon dioxide (CO2), methane
                     (CH4), nitrous oxide (N2O), and others, caused by energy
                     consumption. These gasses are combined into a common unit
-                    called carbon
-                    dioxide equivalent (CO2e), based on their
+                    called carbon dioxide equivalent (CO2e), based on their
                     global warming potential. The value for the carbon footprint
                     is measured by: kW * 1h * 0.5kg CO2/kWh
                   </p>