aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/index.ts26
-rw-r--r--src/public/css/style.css226
-rw-r--r--src/public/img/site_logo.pngbin0 -> 14104 bytes
-rw-r--r--src/routes/api/actuate.ts0
-rw-r--r--src/routes/api/login.ts0
-rw-r--r--src/views/pages/about.ejs43
-rw-r--r--src/views/pages/login.ejs0
-rw-r--r--src/views/partials/head.ejs6
-rw-r--r--src/views/partials/nav.ejs6
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
Binary files differ
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