Added Pi home page and help page

7 years ago · 4d80abf4de
parent 0ae4092789
commit 4d80abf4de
4 changed files with 308 additions and 187 deletions
--- a/server.py
+++ b/server.py
@ -26,7 +26,11 @@ def requires_auth(f):

@app.route('/')
 def index():
-	return '{"onFire": false}\nGo to <a href="status">status</a>.'
+	return render_template('home.html')
+
+@app.route('/help')
+def help():
+	return render_template('help.html')

@app.route('/status')
@requires_auth
--- 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;
-}
+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;
+}
--- a/templates/help.html
+++ b/templates/help.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>ELAB RFID Locks</title>
+    <link rel="stylesheet" type="text/css" href="static/style.css">
+  	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
+  	<script
+  			  src="http://code.jquery.com/jquery-3.1.1.js"
+  			  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+  			  crossorigin="anonymous"></script>
+  	<script src="https://use.fontawesome.com/5c9d51f09a.js"></script>
+  </head>
+  <body>
+    <ul class="navbar">
+      <li><a href="/">Home</a></li>
+      <li><a class="active" href="/help">Help</a></li>
+      <li style="float:right"><a class="right" href="/status">Login</a></li>
+    </ul>
+    <h2>Page under construction!</h2>
+    <p>For now, you can gain <u>UNLIMITED RFID POWERS</u> by emailing one of these people:</p>
+    <ul class="mail-list">
+      <li>David Rozenbeek, <a class="mail-link" href="mailto:davidroz@kth.se">davidroz@kth.se</a></li>
+      <li>Davide Bongiovanni, <a class="mail-link" href="mailto:davdebo@kth.se">davidebo@kth.se</a></li>
+      <li>Sven Hedin, <a class="mail-link" href="mailto:svenhed@kth.se">svenhed@kth.se</a></li>
+      <li>Marek Baczynski, <a class="mail-link" href="mailto:marekba@kth.se">marekba@kth.se</a></li>
+    </ul>
+    <p>In that order.</p>
+  </body>
+</html>
--- a/templates/home.html
+++ b/templates/home.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>ELAB RFID Locks</title>
+    <link rel="stylesheet" type="text/css" href="static/style.css">
+  	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
+  	<script
+  			  src="http://code.jquery.com/jquery-3.1.1.js"
+  			  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+  			  crossorigin="anonymous"></script>
+  	<script src="https://use.fontawesome.com/5c9d51f09a.js"></script>
+  </head>
+  <body>
+    <ul class="navbar">
+      <li><a class="active" href="/">Home</a></li>
+      <li><a href="/help">Help</a></li>
+      <li style="float:right"><a class="right" href="/status">Login</a></li>
+    </ul>
+    <h2>Welcome!</h2>
+    <p>If you are reading this, it is probably because you obeyed some instructions printed on a fridge.</p>
+    <p>Good boy.</p>
+    <p>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.</p>
+    <p>To proceed, press the Help button, located on top of this page.</p>
+  </body>
+</html>