Start rewriting the entire app

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

9 files changed, 307 insertions, 0 deletions

diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..09126ca
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,26 @@
+import express, { Request, Response } from 'express';
+import path from 'path';
+import { env } from 'process';
+
+const app = express();
+
+const port = env.PORT || 2000;
+
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views/pages'));
+app.use('/public', express.static(path.join(__dirname, 'public')));
+
+
+app.get('/', (req: Request, res: Response) => {
+    res.render('index', {
+        errors: [],
+    });
+});
+
+app.get('/about', (req: Request, res: Response) => {
+    res.render('about');
+});
+
+app.listen(port, () => {
+    console.log(`Server is listening on port ${port}`);
+});
\ No newline at end of file
diff --git a/src/public/css/style.css b/src/public/css/style.css
new file mode 100644
index 0000000..cdcad8c
--- /dev/null
+++ b/src/public/css/style.css
@@ -0,0 +1,226 @@
+body {
+    background-color: black;
+}
+
+.header {
+    color: white;
+    text-align: center;
+    vertical-align: middle;
+    position: relative;
+    /* top: 30px; */
+    margin: 5px;
+    font-family: "Times New Roman", Times, serif;
+}
+
+
+/* Customize HTML paragraph element margins */
+
+p {
+    display: block;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    margin-left: 15%;
+    margin-right: 15%;
+}
+
+
+/* Customize the positioning of the logo */
+
+
+
+
+/*-------------------------Buttons-----------------------------------------------------*/
+
+
+/* Used for id=button1 */
+
+#button1 {
+    background-color: #0a3f73;
+    border: solid;
+    border-color: #d5d6d2;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Constantia", sans-serif;
+    border-radius: 10px;
+    display: inline-block;
+    font-size: 20px;
+}
+
+
+/* Used for id=button1 - What the button looks like when a user puts one's cursor on it */
+
+#button1:hover {
+    background-color: white;
+    color: maroon;
+    cursor: pointer;
+}
+
+
+/* Used for id=button2 */
+
+#button2 {
+    /* #ebcba9 is similar to a tan color */
+    background-color: #ebcba9;
+    border: solid;
+    border-color: #d5d6d2;
+    /* #693100 is similar to a brown color */
+    color: #693100;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Constantia", sans-serif;
+    border-radius: 10px;
+    display: inline-block;
+    font-size: 20px;
+}
+
+
+/* Used for id=button2 - What the button looks like when a user puts one's cursor on it */
+
+#button2:hover {
+    background-color: white;
+    color: #0a3f73;
+    cursor: pointer;
+}
+
+
+/* Used for id=button2 */
+
+#button3 {
+    /* #cf7d4e is similar to a light brown color */
+    background-color: #cf7d4e;
+    border: solid;
+    border-color: #d5d6d2;
+    /* #094f02 is similar to a dark green color */
+    color: #094f02;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Constantia", sans-serif;
+    border-radius: 10px;
+    display: inline-block;
+    font-size: 20px;
+}
+
+
+/* Used for id=button2 - What the button looks like when a user puts one's cursor on it */
+
+#button3:hover {
+    background-color: white;
+    color: maroon;
+    cursor: pointer;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+}
+
+
+/* Used for id=main */
+
+#main {
+    color: white;
+    /* border-style: solid; */
+    /* border: 1px solid maroon; */
+    text-align: center;
+    margin: 5px;
+}
+
+#about {
+    font-size: large;
+}
+
+
+/* Used for id=title1 */
+
+#title1 {
+    font-size: xx-large;
+}
+
+
+/* Used for id=title2 */
+
+#title2 {
+    font-size: xx-large;
+    font-weight: bold;
+    margin-top: 20px;
+}
+
+
+/* Used for id=title3 */
+
+#title3 {
+    font-size: xx-large;
+    font-weight: bold;
+    margin-top: 15px;
+}
+
+#subtitle {
+    font-size: large;
+}
+
+#subtitle1 {
+    font-size: 23px;
+}
+
+#Background {
+    color: #ffbb00;
+}
+
+#Pendulum_info {
+    /* #4294cf is similar to a light blue color */
+    color: #4294cf;
+}
+
+#choose_file {
+    border: none;
+    text-decoration: none;
+    display: inline-block;
+}
+
+#submit {}
+
+
+/* Used for id=Start */
+
+#Start {
+    font-size: 25px;
+    font-weight: bold;
+    color: #ffbb00;
+}
+
+
+.navbar {
+    top: 0;
+    width: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #7a0019;
+}
+
+li {
+    float: left;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    font-family: "Raleway", sans-serif;
+    text-decoration: none;
+}
+
+
+
+li a:hover {
+    background-color: #ffcc33;
+    color: #000000;
+    /* Remove underlines from links */
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/public/img/site_logo.png b/src/public/img/site_logo.png
new file mode 100644
index 0000000..029b606
--- /dev/null
+++ b/src/public/img/site_logo.png
diff --git a/src/routes/api/actuate.ts b/src/routes/api/actuate.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/routes/api/actuate.ts
diff --git a/src/routes/api/login.ts b/src/routes/api/login.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/routes/api/login.ts
diff --git a/src/views/pages/about.ejs b/src/views/pages/about.ejs
new file mode 100644
index 0000000..3b376d5
--- /dev/null
+++ b/src/views/pages/about.ejs
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- HTML headers information -->
+  <%- include('../partials/head.ejs') %>
+</head>
+
+<body>
+  <!-- Get the navbar -->
+  <%- include('../partials/nav.ejs') %>
+  <title>About the Remotely Accessible Inverted Pendulum</title>
+  <div class="header">
+    <img src="public/img/site_logo.png" alt="Pendulum logo" width="160" height="130" />
+    <h1 id="title1">Remotely Accessible Inverted Pendulum</h1>
+  </div>
+
+  <div id="main">
+    <div id="about">
+      <h2 id="subtitle">
+        Created by <br />
+        Abrar Nair Islam, Brendan Lake, Cory Ohnsted, Matt Strapp, Kiflu Woldegiorgis (2022) <br />
+        Sam Hansen, Rezkath Awal, Donovan Peterson, Joseph Jewett (2021) <br />
+        Alin Butoi, Paul D’Amico, Dat Nguyen, Ross Olson, Rachel Schow (2019) <br /> <br />
+        Advisor: Professor Andrew Lamperski <br />
+        Sponsored by the University of Minnesota -Twin Cities <br />
+      </h2>
+      <br />
+      <h1 id="Background">Background</h1>
+      <p>
+        Our teams 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, and web development.
+      </p>
+      <br />
+      <h1 id="Pendulum_info"> 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>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/views/pages/login.ejs b/src/views/pages/login.ejs
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/pages/login.ejs
diff --git a/src/views/partials/head.ejs b/src/views/partials/head.ejs
new file mode 100644
index 0000000..02786be
--- /dev/null
+++ b/src/views/partials/head.ejs
@@ -0,0 +1,6 @@
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<link rel="stylesheet" href="public/css/style.css" type="text/css">
+<link rel="icon" href="public/img/site_logo.png" type="image/x-icon">
\ No newline at end of file
diff --git a/src/views/partials/nav.ejs b/src/views/partials/nav.ejs
new file mode 100644
index 0000000..2b83518
--- /dev/null
+++ b/src/views/partials/nav.ejs
@@ -0,0 +1,6 @@
+<nav>
+  <ul class="navbar">
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About the Inverted Pendulum</a></li>
+  </ul>
+</nav>
\ No newline at end of file