From 8f98579345d45e621d80ae02a488d5c5e24acc3f Mon Sep 17 00:00:00 2001
From:  <davide@HOTSWAP441.hotswap.se>
Date: Sun, 22 Oct 2017 00:55:30 +0200
Subject: [PATCH] Added cards and other style and shit

---
 static/style.css     | 468 ++++++++++++++++++++++++-------------------
 templates/index.html |  35 ++--
 2 files changed, 272 insertions(+), 231 deletions(-)

diff --git a/static/style.css b/static/style.css
index bc4b06a..f062d4e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,212 +1,258 @@
-html {
-	font-family: 'Roboto', sans-serif;
-	margin: 0;
-	padding: 0;
-}
-
-h1 {
-}
-
-h2 {
-	padding-left: 40pt;
-}
-
-.leaderboard {
-	width: 35%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding-top: 8pt;
-	height: 100%;
-	background-color: rgba(0,0,0,0.8);
-	color: #d4d0cd;
-}
-
-.next-meal {
-	width: 45%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 35%;
-	padding-top: 8pt;
-}
-
-.lb-entry {
-	padding: 0;
-	height: 60pt;
-	position: relative;
-}
-
-.lb-entry img {
-	height: 50pt;
-	width: auto;
-	position: absolute;
-	top: 50%;
-	left: 25pt;
-	margin-top: -25pt;
-}
-
-.lb-entry span.score {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 70%;
-}
-
-.lb-entry span.name {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 30%;
-}
-
-.cook-entry {
-	padding: 0;
-	height: 60pt;
-	position: relative;
-}
-
-.cook-entry img {
-	height: 50pt;
-	width: auto;
-	position: absolute;
-	top: 50%;
-	left: 40pt;
-	margin-top: -25pt;
-}
-
-.cook-entry span {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 120pt;
-}
-
-.eater-entry {
-	padding: 0;
-	height: 60pt;
-	position: relative;
-}
-
-.eater-entry img {
-	height: 50pt;
-	width: auto;
-	position: absolute;
-	top: 50%;
-	left: 40pt;
-	margin-top: -25pt;
-}
-
-.eater-entry span {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 120pt;
-}
-
-.rect-button {
-	width: 100pt;
-	height: 25pt;
-	background-color: #EE7500;
-	position: relative;
-	color: white;
-	left: 220pt;
-	margin-top: 3pt;
-	cursor: pointer;
-}
-
-.rect-button span {
-	font-size: 12pt;
-	position: absolute;
-	top: 50%;
-	margin-top: -6pt;
-	left: 0;
-	width: 100%;
-	text-align: center;
-	color: white;
-}
-
-.add-button {
-	height: 50pt;
-	width: 50pt;
-	position: absolute;
-	top: 50%;
-	left: 40pt;
-	margin-top: -25pt;
-	color: white;
-	border-radius: 25pt;
-	background-color: #EE7500;
-	cursor: pointer;
-}
-
-.add-button span {
-	font-size: 34pt;
-	position: absolute;
-	top: 50%;
-	margin-top: -18pt;
-	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-color: #EE7500;
-	position: absolute;
-	color: white;
-	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: white;
+html {
+	font-family: 'Roboto', sans-serif;
+	margin: 0;
+	padding: 0;
+}
+
+h1 {
+}
+
+h2 {
+	padding-left: 40pt;
+}
+
+.leaderboard {
+	width: 35%;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	padding-top: 8pt;
+	height: auto;
+	background-color: rgba(0,0,0,0.8);
+	color: #d4d0cd;
+}
+
+.next-meal {
+	width: 45%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 35%;
+	padding-top: 8pt;
+}
+
+.lb-entry {
+	padding: 0;
+	height: 60pt;
+	position: relative;
+}
+
+.lb-entry img {
+	height: 50pt;
+	width: auto;
+	position: absolute;
+	top: 50%;
+	left: 25pt;
+	margin-top: -25pt;
+}
+
+.lb-entry span.score {
+	position: absolute;
+	font-size: 16pt;
+	top: 50%;
+	margin-top: -8pt;
+	left: 70%;
+}
+
+.lb-entry span.name {
+	position: absolute;
+	font-size: 16pt;
+	top: 50%;
+	margin-top: -8pt;
+	left: 30%;
+}
+
+.cook-entry {
+	padding: 0;
+	/*height: 90pt;*/
+	position: relative;
+}
+
+.cook-card {
+	background-color: #F1EDEA;
+	height: 100pt;
+	margin-left: 20pt;
+	-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);
+}
+
+.cook-card img {
+	height: 50pt;
+	width: auto;
+	position: absolute;
+	top: 50%;
+	left: 40pt;
+	margin-top: -25pt;
+}
+
+#cook-small-thumb {
+	height: 20pt;
+	width: auto;
+	position: relative;
+	left: 0;
+	top: 0;
+}
+
+.cook-card span {
+	position: absolute;
+	font-size: 16pt;
+	top: 50%;
+	margin-top: -8pt;
+	left: 120pt;
+}
+
+.cook-card p {
+	position: absolute;
+	left: 140pt;
+	margin: -16pt 0 0 0;
+	font-size: 11pt;
+	height: 24pt;
+	top: 50%;
+	text-align: center;
+}
+
+.eater-entry {
+	padding: 0;
+	position: relative;
+}
+
+.eater-card {
+	background-color: #F1EDEA;
+	height: 70pt;
+	width: 200pt;
+	margin: 6pt 0 6pt 20pt;
+	-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);
+}
+
+.eater-card img {
+	height: 50pt;
+	width: auto;
+	position: absolute;
+	top: 50%;
+	left: 40pt;
+	margin-top: -25pt;
+}
+
+.eater-card span {
+	position: absolute;
+	font-size: 16pt;
+	top: 50%;
+	margin-top: -8pt;
+	left: 120pt;
+}
+
+.eater-entry span {
+	position: absolute;
+	font-size: 16pt;
+	top: 50%;
+	margin-top: -8pt;
+	left: 120pt;
+}
+
+.rect-button {
+	width: 100pt;
+	height: 26pt;
+	background-color: #EE7500;
+	position: absolute;
+	color: white;
+	top: 50%;
+	right: 32pt;
+	margin-top: -13pt;
+	cursor: pointer;
+}
+
+.rect-button span {
+	font-size: 12pt;
+	position: absolute;
+	top: 50%;
+	margin-top: -6pt;
+	left: 0;
+	width: 100%;
+	text-align: center;
+	color: white;
+}
+
+.add-button {
+	height: 50pt;
+	width: 50pt;
+	position: absolute;
+	top: 50%;
+	left: 40pt;
+	margin-top: -25pt;
+	color: white;
+	border-radius: 25pt;
+	background-color: #EE7500;
+	cursor: pointer;
+}
+
+.add-button span {
+	font-size: 34pt;
+	position: absolute;
+	top: 50%;
+	margin-top: -18pt;
+	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-color: #EE7500;
+	position: absolute;
+	color: white;
+	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: white;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9a2f85f..96ae21b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -32,43 +32,38 @@
 		<h1 style="padding-left: 40pt">Next Meal</h1>
 		<h2>Cook</h2>
 			<div class="cook-entry">
-				<img src="{{url_for('static', filename=cook.name + '.png')}}">
-				<span>{{ cook.name }}</span>
-				{% if cook.name == current_user.name %}
-					{% if cook.confirmed == "no" %}
-					<div class="rect-button" onclick="confirm()"><span>CONFIRM</span></div>
-					<div class="rect-button" onclick="bail()"><span>BAIL</span></div>
-					{% else %}
-					<div class="rect-button" style="background-color: #8faf38"><span>CONFIRMED</span></div>
-					{% endif %}
+				<div class="cook-card">
+				{% if cook.confirmed == "no" %}
+				<img src="{{url_for('static', filename='question.png')}}">
+				<p>If nobody volunteers,<br><br><img id="cook-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}"> will cook.</p>
+				<div class="rect-button" onclick="volunteer()"><span>VOLUNTEER</span></div>
 				{% else %}
-					{% if cook.confirmed == "no" %}
-					<div class="rect-button" onclick="confirm()"><span></span></div>
-					{% else %}
-					<div class="rect-button" style="background-color: #8faf38"><span>CONFIRMED</span></div>
-					{% endif %}
+				<img src="{{url_for('static', filename= current_user.name + '.png')}}">
+				<span>{{ cook.name }}</span>
+				<div class="rect-button" style="background-color: #8faf38; cursor: default;"><span>CONFIRMED</span></div>
 				{% endif %}
-			</div>
+			</div></div>
 		<h2>Eaters</h2>
 			{% for eater in eaters %}
 			<div class="eater-entry">
+				<div class="eater-card">
 				<img src="{{url_for('static', filename=eater + '.png')}}">
 				<span>{{ eater }}</span>
-			</div>
+			</div></div>
 			{% endfor %}
-			{% if cook.name != current_user.name %}
+			
 				{% if not current_user.name in eaters %}
-				<div class="eater-entry">
+				<div class="eater-entry" style="height: 60pt;">
 					<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="eater-entry" style="height: 60pt;">
 					<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">