From 7b0b6f69891b304328fee2c7d5aa2e7cb969fb3e Mon Sep 17 00:00:00 2001
From: Cesar Delgado <Siizer@users.noreply.github.com>
Date: Fri, 12 Jan 2024 16:13:50 +0000
Subject: [PATCH] Add files via upload

---
 index.html                 | 34 ++++++++++++----
 "style - C\303\263pia.css" | 82 ++++++++++++++++++++++++++++----------
 2 files changed, 87 insertions(+), 29 deletions(-)
diff --git a/index.html b/index.html
index 438748e..8710bf1 100644
--- a/index.html
+++ b/index.html
@@ -6,10 +6,12 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Three-Phase Electrical System Visualization</title>
 	<link rel="stylesheet" type="text/css" href="style - Cópia.css">
+	<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 	<script src="d3.v7.min.js"></script>
 </head>
 
-<body>
+<body class="dark-mode">
+	<button id="toggle-button"><i type="solid" class='bx bxs-sun'></i></button>
 	<div id="main-container">
 		<p class="pageTitle">Impedance relationship to Voltage and Current (p.u.)</p>
 		<div id="first-row">
@@ -19,14 +21,29 @@
 		</div>
 	</div>
 	<script>
-		// Define dimensions and configurations
+		document.getElementById('toggle-button').addEventListener('click', function () {
+			var body = document.body;
+
+			if (body.classList.contains('dark-mode')) {
+				body.classList.remove('dark-mode');
+				body.classList.add('light-mode');
+				d3.select("#rectFrame").style("stroke", "black")
+				document.getElementsByClassName("bxs-sun")[0].classList.remove("bxs-sun");
+				document.getElementsByClassName("bx")[0].classList.add("bxs-moon");
+			} else {
+				body.classList.remove('light-mode');
+				body.classList.add('dark-mode');
+				d3.select("#rectFrame").style("stroke", "white")
+				document.getElementsByClassName("bxs-moon")[0].classList.remove("bxs-moon");
+				document.getElementsByClassName("bx")[0].classList.add("bxs-sun");
+			}
+		});
+		var maxStatus = 2;
 		var visualizationElement = d3.select("#visualization");
 
 		const margin = { top: 20, right: 20, bottom: 20, left: 20 };
 		const boundingRect = document.getElementById("visualization");
-		const svgWidth = visualizationElement._groups[0][0].clientWidth - margin.left - margin.right;
-		const svgHeight = visualizationElement._groups[0][0].clientHeight - margin.top - margin.bottom;
-		console.log("show values", svgWidth, svgHeight, "min", Math.min(svgWidth, svgHeight));
+		const svgWidth = Math.min(visualizationElement._groups[0][0].clientWidth - margin.left - margin.right, window.innerHeight + visualizationElement._groups[0][0].clientHeight - margin.top - margin.bottom - document.getElementsByClassName("pageTitle")[0].clientHeight);
 		const arrowSize = 8;
 		const colors = { A: 'red', B: 'gold', C: 'blue', Z0: "darkgrey", Z1: "limegreen", Z2: "magenta" };
 
@@ -46,9 +63,10 @@
 			.attr('height', svgWidth + margin.top + margin.bottom)
 			.attr('width', svgWidth + margin.left + margin.right)
 			.attr('transform', `translate(${margin.left / 2}, ${margin.top / 2})`)
-			.style('stroke', 'black')
+			.style('stroke', 'white')
 			.style('fill', 'none')
-			.style('stroke-width', '1px');
+			.style('stroke-width', '1px')
+			.attr("id", "rectFrame");
 		svg.append("defs").selectAll("marker")
 			.data("markc-arc")
 			.enter().append("marker")
@@ -77,10 +95,12 @@
 		var yAxis = d3.axisLeft(yScale);
 
 		mainGroup.append("g")
+			.attr("class", "x-axis")
 			.attr("transform", "translate(" + margin.left + "," + svgWidth / 2 + ")")
 			.call(xAxis);
 
 		mainGroup.append("g")
+			.attr("class", "y-axis")
 			.attr("transform", "translate(" + svgWidth / 2 + "," + margin.top + ")")
 			.call(yAxis);
 
diff --git "a/style - C\303\263pia.css" "b/style - C\303\263pia.css"
index 5500ad3..9b8bc10 100644
--- "a/style - C\303\263pia.css"	
+++ "b/style - C\303\263pia.css"	
@@ -31,6 +31,31 @@ html, body {
   color-scheme: dark mode;
 }
 
+body.light-mode {
+  background-color: white;
+  color: black;
+}
+
+body.dark-mode {
+  background-color: black;
+  color: white;
+  & button{
+    color: white;
+  }
+}
+
+
+#toggle-button {
+  position: fixed;
+  top: 10px;
+  right: 100px;
+  z-index: 1000; /* This ensures the button is on top of everything else */
+}
+
+.bx {
+  font-size: 1.5rem;
+}
+
 button{
   position: relative;
 	background:none;
@@ -1028,29 +1053,42 @@ flex:10;
     width: 1184px;
     margin: 0 auto; /* Center the grid */
   }
+#input-fields1 {
+  grid-column: span 3; /* Take up 3 of 12 columns */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
 
-  #input-fields1 {
-    grid-column: span 3; /* Take up 3 of 12 columns */
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
+#visualization {
+  grid-column: span 6; /* Take up 6 of 12 columns */
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
 
+#input-fields {
+  grid-column: span 3; /* Take up 3 of 12 columns */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (min-width: 1200px) {
+  #first-row {
+    width: 100%;
+  }
+  #input-fields1, #input-fields {
+    grid-column: span 2;
+  }
   #visualization {
-    grid-column: span 6; /* Take up 6 of 12 columns */
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    grid-column: span 8;
   }
-
-  #input-fields {
-    grid-column: span 3; /* Take up 3 of 12 columns */
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
\ No newline at end of file
+}
\ No newline at end of file
