Added login function and user-dependent behavior

static/script.js

@@ -0,0 +1,11 @@
+function logout() {
+	window.location.href = "/logout";
+}
+
+function addme() {
+
+}
+
+function removeme() {
+
+}

static/style.css

@@ -23,7 +23,7 @@ h2 {
 }
 
 .next-meal {
-	width: 64%;
+	width: 45%;
 	height: 100%;
 	position: absolute;
 	top: 0;
@@ -151,4 +151,62 @@ h2 {
 	left: 0;
 	width: 100%;
 	text-align: center;
+}
+
+.user-info {
+	width: 19%;
+	height: 100%;
+	position: absolute;
+	left: 80%;
+}
+
+.user-card {
+	height: 80pt;
+	position: relative;
+	background-color: #F1EDEA;
+	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+}
+
+.user-card img{
+	width: 50pt;
+	height: auto;
+	position: absolute;
+	top: 50%;
+	left: 8pt;
+	margin-top: -25pt;
+}
+
+.user-card span {
+	font-size: 16pt;
+	position: absolute;
+	top: 30%;
+	left: 75pt;
+	margin-top: -8pt;
+	width: 90pt;
+	text-align: center;
+}
+
+.logout-button {
+	width: 90pt;
+	height: 25pt;
+	background: #EE7500;
+	position: absolute;
+	color: #F1EDEA;
+	left: 75pt;
+	top: 70%;
+	margin-top: -13pt;
+	cursor: pointer;
+}
+
+.logout-button span {
+	font-size: 12pt;
+	position: absolute;
+	top: 50%;
+	margin-top: -6pt;
+	left: 0;
+	width: 100%;
+	text-align: center;
+	color: #EAEAEA;
 }

templates/index.html

@@ -34,20 +34,38 @@
 			<div class="cook-entry">
 				<img src="{{url_for('static', filename=cook.name + '.png')}}">
 				<span>{{ cook.name }}</span>
+				{% if cook.name == current_user.name %}
 				<div class="rect-button"><span>CONFIRM</span></div>
 				<div class="rect-button"><span>BAIL</span></div>
+				{% endif %}
 			</div>
 		<h2>Eaters</h2>
 			{% for eater in eaters %}
 			<div class="eater-entry">
-				<img src="{{url_for('static', filename=eater.name + '.png')}}">
-				<span>{{ eater.name }}</span>
+				<img src="{{url_for('static', filename=eater + '.png')}}">
+				<span>{{ eater }}</span>
 			</div>
 			{% endfor %}
-			<div class="eater-entry">
-				<div class="add-button" onclick="addme()"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div>
-				<span>Add me</span>
-			</div>
+			{% if cook.name != current_user.name %}
+				{% if not current_user.name in eaters %}
+				<div class="eater-entry">
+					<div class="add-button" onclick="addme()"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div>
+					<span>Add me</span>
+				</div>
+				{% else %}
+				<div class="eater-entry">
+					<div class="add-button" onclick="removeme()"><span><i class="fa fa-minus" aria-hidden="true"></i></span></div>
+					<span>Remove me</span>
+				</div>
+				{% endif %}
+			{% endif %}
+	</div>
+	<div class="user-info">
+		<div class="user-card">
+			<img src="{{url_for('static', filename=current_user.name + '.png')}}">
+			<span>{{current_user.name}}</span>
+			<div class="logout-button" onclick="logout()"><span>LOGOUT</span></div>
+		</div>
 	</div>
 </body>
 </html>