From 4d80abf4de7ae5b6dc828fc5979fcc0c1b7f1e73 Mon Sep 17 00:00:00 2001 From: Jared Date: Mon, 27 Mar 2017 14:48:23 +0000 Subject: [PATCH] Added Pi home page and help page --- server.py | 6 +- static/style.css | 433 +++++++++++++++++++++++++------------------- templates/help.html | 30 +++ templates/home.html | 26 +++ 4 files changed, 308 insertions(+), 187 deletions(-) create mode 100755 templates/help.html create mode 100755 templates/home.html diff --git a/server.py b/server.py index 92005c7..4ac55ca 100644 --- a/server.py +++ b/server.py @@ -26,7 +26,11 @@ def requires_auth(f): @app.route('/') def index(): - return '{"onFire": false}\nGo to status.' + return render_template('home.html') + +@app.route('/help') +def help(): + return render_template('help.html') @app.route('/status') @requires_auth diff --git a/static/style.css b/static/style.css index 0ee0407..b26e7c4 100644 --- a/static/style.css +++ b/static/style.css @@ -1,186 +1,247 @@ -html { - background: #D7E2E2; - font-family: 'Roboto'; - color: #000F0F; -} - -::-webkit-scrollbar { - display: none; -} - -.recent { - display: inline-block; - left: 0; - position: absolute; - top: 0; - width: 30%; - text-align: center; -} - -.event { - font-size: 12pt; - padding: 0 6pt 0 6pt; - margin-left: 8pt; - transition: 0.4s; - width: 100%; -} - -.event:hover { - background: #226666; - width: 105%; -} - -.history-header { - display: inline-block; - background-color: #013A3A; - color: #D7E2E2; - margin: 0 0 8pt 0; - padding: 10pt 0 10pt 0; - text-align: center; - font-size: 16pt; - width: 100%; -} - -.time { - padding: 6pt 0 6pt 0; - display: inline-block; - width: 49%; - text-align: left; -} - -.name { - padding: 6pt 0 6pt 0; - display: inline-block; - width: 49%; - text-align: right; -} - -.unknown_card { - color: #E26B08; -} - -.everything-else { - display: inline-block; - width: 69%; - left: 30%; - top: 0; - position: absolute; - text-align: center; -} - -h1 { - text-align: center; - font-weight: 300; -} - -.big-button { - display: inline-block; - background-color: #013A3A; - color: #D7E2E2; - text-align: center; - font-size: 12pt; - padding: 10pt; - margin: 6pt 0 10pt 0; - width: 120pt; - border-radius: 2pt; - transition: 0.2s; -} - -.big-button:hover { - background-color: #226666; -} - -.button { - width: 50%; - background-color: #013A3A; - color: #5E9292; - padding: 6pt; - text-align: center; - font-size: 16pt; - margin: 16pt 0 16pt 0; - transition: 0.2s; -} - -.separator { - height: 10%; -} - -.vertical-separator { - height: 100%; - width: 1px; - background-color: #5E9292; - position: absolute; - top: 0; - left: 33%; - z-index: 100; -} - -.shadow { - background-color: black; - display: none; - height: 100%; - left: 0; - opacity: 0.0; - position: absolute; - top: 0; - width: 100%; - z-index: 200; -} - -.overlay { - background-color: #226666; - color: #D7E2E2; - display: none; - height: 60%; - left: 35%; - padding: 8pt; - position: absolute; /*Should probably be 'fixed' instead*/ - top: -70%; - width: 30%; - z-index: 201; - border-radius: 2pt; - text-align: center; -} - -.checkbox-wrapper { - text-align: left; -} - -.card-id { - font-weight: 300; - text-align: center; - padding: 8pt; - font-size: 24pt; -} - -input[type=text] { - font-size: 16pt; - padding: 5pt 8pt 5pt 8pt; - margin-top: 8pt; - margin-bottom: 8pt; - width: 90%; -} - -input[type=text].search-bar { - width: 75%; -} - -.button { - background-color: #013A3A; - color: #5E9292; - border: none; - text-align: center; - font-size: 10pt; - width: 45%; - margin: 8pt; - position: absolute; - bottom: 0; -} - -#save { - right: 0; -} - -#cancel { - left: 0; -} \ No newline at end of file +html { + background: #D7E2E2; + font-family: 'Roboto'; + color: #000F0F; +} + +::-webkit-scrollbar { + display: none; +} + +.recent { + display: inline-block; + left: 0; + position: absolute; + top: 0; + width: 30%; + text-align: center; +} + +.event { + font-size: 12pt; + padding: 0 6pt 0 6pt; + margin-left: 8pt; + transition: 0.4s; + width: 100%; +} + +.event:hover { + background: #226666; + width: 105%; +} + +.history-header { + display: inline-block; + background-color: #013A3A; + color: #D7E2E2; + margin: 0 0 8pt 0; + padding: 10pt 0 10pt 0; + text-align: center; + font-size: 16pt; + width: 100%; +} + +.time { + padding: 6pt 0 6pt 0; + display: inline-block; + width: 49%; + text-align: left; +} + +.name { + padding: 6pt 0 6pt 0; + display: inline-block; + width: 49%; + text-align: right; +} + +.unknown_card { + color: #E26B08; +} + +.everything-else { + display: inline-block; + width: 69%; + left: 30%; + top: 0; + position: absolute; + text-align: center; +} + +h1 { + text-align: center; + font-weight: 300; +} + +.big-button { + display: inline-block; + background-color: #013A3A; + color: #D7E2E2; + text-align: center; + font-size: 12pt; + padding: 10pt; + margin: 6pt 0 10pt 0; + width: 120pt; + border-radius: 2pt; + transition: 0.2s; +} + +.big-button:hover { + background-color: #226666; +} + +.button { + width: 50%; + background-color: #013A3A; + color: #5E9292; + padding: 6pt; + text-align: center; + font-size: 16pt; + margin: 16pt 0 16pt 0; + transition: 0.2s; +} + +.separator { + height: 10%; +} + +.vertical-separator { + height: 100%; + width: 1px; + background-color: #5E9292; + position: absolute; + top: 0; + left: 33%; + z-index: 100; +} + +.shadow { + background-color: black; + display: none; + height: 100%; + left: 0; + opacity: 0.0; + position: absolute; + top: 0; + width: 100%; + z-index: 200; +} + +.overlay { + background-color: #226666; + color: #D7E2E2; + display: none; + height: 60%; + left: 35%; + padding: 8pt; + position: absolute; /*Should probably be 'fixed' instead*/ + top: -70%; + width: 30%; + z-index: 201; + border-radius: 2pt; + text-align: center; +} + +.checkbox-wrapper { + text-align: left; +} + +.card-id { + font-weight: 300; + text-align: center; + padding: 8pt; + font-size: 24pt; +} + +input[type=text] { + font-size: 16pt; + padding: 5pt 8pt 5pt 8pt; + margin-top: 8pt; + margin-bottom: 8pt; + width: 90%; +} + +input[type=text].search-bar { + width: 75%; +} + +.button { + background-color: #013A3A; + color: #5E9292; + border: none; + text-align: center; + font-size: 10pt; + width: 45%; + margin: 8pt; + position: absolute; + bottom: 0; +} + +#save { + right: 0; +} + +#cancel { + left: 0; +} + +ul.navbar { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #5E9292; +} + +ul.navbar li { + float: left; +} + +ul.navbar li a { + display: block; + color: #000F0F; + text-align: center; + padding: 14px 16px; + width: 60pt; + text-decoration: none; + font-size: 12pt; +} + +ul.navbar li a:hover { + background-color: #226666; +} + +ul.navbar li a.active { + background-color: #226666; + color: #D7E2E2; +} + +h2 { + font-size: 26pt; + text-align: left; + padding: 26pt 0 10pt 80pt; + color: #013A3A; +} + +p { + font-size: 16pt; + width: 60%; + padding-left: 40pt; + color: #013A3A; +} + +ul.mail-list { + padding-left: 50pt; +} + +ul.mail-list li { + padding: 0 0 5pt 0; + font-size: 16pt; + color: #013A3A; +} + +a.mail-link { + text-decoration: none; + font-weight: bold; + color: #013A3A; +} diff --git a/templates/help.html b/templates/help.html new file mode 100755 index 0000000..b4873b0 --- /dev/null +++ b/templates/help.html @@ -0,0 +1,30 @@ + + + + + ELAB RFID Locks + + + + + + + +

Page under construction!

+

For now, you can gain UNLIMITED RFID POWERS by emailing one of these people:

+ +

In that order.

+ + diff --git a/templates/home.html b/templates/home.html new file mode 100755 index 0000000..9a22671 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,26 @@ + + + + + ELAB RFID Locks + + + + + + + +

Welcome!

+

If you are reading this, it is probably because you obeyed some instructions printed on a fridge.

+

Good boy.

+

You are one step closer to gaining access to an unlimited supply of delicious frozen dinners and a wide range of refreshing beverages, such as sodas, or... yeah just soda.

+

To proceed, press the Help button, located on top of this page.

+ +