some more changes to make the website look better

4 files changed, 54 insertions, 1 deletions

diff --git a/Web/Server/static/Server.css b/Web/Server/static/Server.css
index 6f366ec..5db22eb 100644
--- a/Web/Server/static/Server.css
+++ b/Web/Server/static/Server.css
@@ -7,6 +7,27 @@
     margin:5px;
 }
 
+.button {
+    background-color: gold;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+}
+
+.button:hover{
+    background-color: white;
+    color: gold;
+    cursor: pointer;
+}
+
+#about{
+    display: none;
+}
+
 #title{
     font-size: xx-large;
 }
diff --git a/Web/Server/static/Server.js b/Web/Server/static/Server.js
index 30274f2..129951b 100644
--- a/Web/Server/static/Server.js
+++ b/Web/Server/static/Server.js
@@ -7,4 +7,13 @@ function showLoad(){
     if (div.style.display !== 'none') {
         div.style.display = 'none';
     }
+}
+
+function toggleAbout(){
+    var x = document.getElementById("about");
+    if (x.style.display === "none") {
+        x.style.display = "block";
+    } else {
+        x.style.display = "none";
+    }
 }
\ No newline at end of file
diff --git a/Web/Server/templates/base.html b/Web/Server/templates/base.html
index a141c0a..c54340e 100644
--- a/Web/Server/templates/base.html
+++ b/Web/Server/templates/base.html
@@ -12,6 +12,29 @@
                 Advisor: Professor Andrew Lamperski <br>
                 Sponsored by the University of Minnesota - Twin Cities <br>
             </h2>
+
+            <button class="button" onclick="toggleAbout()">About</button>
+
+            <br>
+            <br>
+
+            <div id="about">
+                <h1>Team ANDI'S PIE</h1>
+                <div>
+                    Andy’s Nifty Dynamic Inverted Swinging Pendulum in Equilibrium
+                </div>
+            
+                <h1>Background</h1>
+                <p>
+                    Our team developed an inverted pendulum system that could be accessed over a computer network for use by students. The inverted pendulum is a common controls problem used in academia. This problem teaches students concepts of control loops, data filtering, and machine learning.
+                </p>
+            
+                <h1> What is an Inverted Pendulum? </h1>
+                <p>
+                    A vertical pendulum that is balanced via the base moving. <br>
+                    Controlled movements are determined by measuring the position and speed of the pendulum and base.
+                </p>
+            </div>
         </nav>
 
         <div class = "container">
diff --git a/Web/Server/templates/index.html b/Web/Server/templates/index.html
index 1350fdd..730d6c5 100644
--- a/Web/Server/templates/index.html
+++ b/Web/Server/templates/index.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 	<div id="upload">
-		<h2>Select a file to upload</h2>
+		<h2>Upload a python file onto the Inverted Pendulum</h2>
 		<p>
 			{% with messages = get_flashed_messages() %}
 			{% if messages %}