From 5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621 Mon Sep 17 00:00:00 2001 From: Matt Strapp Date: Wed, 9 Feb 2022 17:22:30 -0600 Subject: Start rewriting the entire app Signed-off-by: Matt Strapp --- src/index.ts | 26 +++++ src/public/css/style.css | 226 +++++++++++++++++++++++++++++++++++++++++++ src/public/img/site_logo.png | Bin 0 -> 14104 bytes src/routes/api/actuate.ts | 0 src/routes/api/login.ts | 0 src/views/pages/about.ejs | 43 ++++++++ src/views/pages/login.ejs | 0 src/views/partials/head.ejs | 6 ++ src/views/partials/nav.ejs | 6 ++ 9 files changed, 307 insertions(+) create mode 100644 src/index.ts create mode 100644 src/public/css/style.css create mode 100644 src/public/img/site_logo.png create mode 100644 src/routes/api/actuate.ts create mode 100644 src/routes/api/login.ts create mode 100644 src/views/pages/about.ejs create mode 100644 src/views/pages/login.ejs create mode 100644 src/views/partials/head.ejs create mode 100644 src/views/partials/nav.ejs (limited to 'src') 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 Binary files /dev/null and b/src/public/img/site_logo.png differ diff --git a/src/routes/api/actuate.ts b/src/routes/api/actuate.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/api/login.ts b/src/routes/api/login.ts new file mode 100644 index 0000000..e69de29 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 @@ + + + + + + <%- include('../partials/head.ejs') %> + + + + + <%- include('../partials/nav.ejs') %> + About the Remotely Accessible Inverted Pendulum +
+ Pendulum logo +

Remotely Accessible Inverted Pendulum

+
+ +
+
+

+ Created by
+ Abrar Nair Islam, Brendan Lake, Cory Ohnsted, Matt Strapp, Kiflu Woldegiorgis (2022)
+ Sam Hansen, Rezkath Awal, Donovan Peterson, Joseph Jewett (2021)
+ Alin Butoi, Paul D’Amico, Dat Nguyen, Ross Olson, Rachel Schow (2019)

+ Advisor: Professor Andrew Lamperski
+ Sponsored by the University of Minnesota -Twin Cities
+

+
+

Background

+

+ 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. +

+
+

What is an Inverted Pendulum?

+

+ A vertical pendulum that is balanced via the base moving.
Controlled movements are determined by measuring the position and speed of the pendulum and base. +

+
+
+ + + \ 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 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 @@ + + + + + + \ 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 @@ + \ No newline at end of file -- cgit v1.2.3