diff options
author | Matt Strapp <matt@mattstrapp.net> | 2022-02-09 17:22:30 -0600 |
---|---|---|
committer | Matt Strapp <matt@mattstrapp.net> | 2022-02-09 17:37:37 -0600 |
commit | 5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621 (patch) | |
tree | f3296766c72e951946ec4c986e382299682c3a6b /src | |
parent | Start rewriting the entire app (diff) | |
download | ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.tar ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.tar.gz ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.tar.bz2 ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.tar.lz ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.tar.xz ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.tar.zst ee4511w-web-5c662ac5b4f6664d4d0a1d501d7d2fa2f2fc0621.zip |
Start rewriting the entire app
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to '')
-rw-r--r-- | src/index.ts | 26 | ||||
-rw-r--r-- | src/public/css/style.css | 226 | ||||
-rw-r--r-- | src/public/img/site_logo.png | bin | 0 -> 14104 bytes | |||
-rw-r--r-- | src/routes/api/actuate.ts | 0 | ||||
-rw-r--r-- | src/routes/api/login.ts | 0 | ||||
-rw-r--r-- | src/views/pages/about.ejs | 43 | ||||
-rw-r--r-- | src/views/pages/login.ejs | 0 | ||||
-rw-r--r-- | src/views/partials/head.ejs | 6 | ||||
-rw-r--r-- | src/views/partials/nav.ejs | 6 |
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 Binary files differnew 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 |