Davide Bongiovanni
7 years ago
parent
bbfd3c1b30
commit
978f52a32e
|
After Width: | Height: | Size: 57 KiB |
@ -0,0 +1,156 @@
|
|||||||
|
html {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding-left: 20pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding-left: 20pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 64%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 35%;
|
||||||
|
padding-left: 8pt;
|
||||||
|
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: 25pt;
|
||||||
|
margin-top: -25pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cook-entry span {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16pt;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -8pt;
|
||||||
|
left: 100pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eater-entry {
|
||||||
|
padding: 0;
|
||||||
|
height: 60pt;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eater-entry img {
|
||||||
|
height: 50pt;
|
||||||
|
width: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 25pt;
|
||||||
|
margin-top: -25pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eater-entry span {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16pt;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -8pt;
|
||||||
|
left: 100pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rect-button {
|
||||||
|
width: 100pt;
|
||||||
|
height: 25pt;
|
||||||
|
background: #EE7500;
|
||||||
|
position: relative;
|
||||||
|
color: #F1EDEA;
|
||||||
|
left: 200pt;
|
||||||
|
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: #EAEAEA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button {
|
||||||
|
height: 50pt;
|
||||||
|
width: 50pt;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 25pt;
|
||||||
|
margin-top: -25pt;
|
||||||
|
color: #F1EDEA;
|
||||||
|
border-radius: 25pt;
|
||||||
|
background: #EE7500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button span {
|
||||||
|
font-size: 34pt;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -18pt;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>KUKapp</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
|
||||||
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||||
|
<script src="https://use.fontawesome.com/2fef7be393.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
html {
|
||||||
|
background-image: url({{url_for('static', filename='burger.jpg')}});
|
||||||
|
background-position: left top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="leaderboard">
|
||||||
|
<h1>Leaderboard</h1>
|
||||||
|
<div class="leaderboard-contiainer">
|
||||||
|
{% for person in leaderboard %}
|
||||||
|
<div class="lb-entry">
|
||||||
|
<img src="{{url_for('static', filename=person.name + '.jpg')}}">
|
||||||
|
<span class="name">{{ person.name }}</span>
|
||||||
|
<span class="score">{{ person.score }}</span>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="next-meal">
|
||||||
|
<h1>Next Meal</h1>
|
||||||
|
<h2>Cook</h2>
|
||||||
|
<div class="cook-entry">
|
||||||
|
<img src="{{url_for('static', filename=cook.name + '.jpg')}}">
|
||||||
|
<span>{{ cook.name }}</span>
|
||||||
|
<div class="rect-button"><span>CONFIRM</span></div>
|
||||||
|
<div class="rect-button"><span>BAIL</span></div>
|
||||||
|
</div>
|
||||||
|
<h2>Eaters</h2>
|
||||||
|
{% for eater in eaters %}
|
||||||
|
<div class="eater-entry">
|
||||||
|
<img src="{{url_for('static', filename=eater.name + '.jpg')}}">
|
||||||
|
<span>{{ eater.name }}</span>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
<div class="eater-entry">
|
||||||
|
<div class="add-button"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div>
|
||||||
|
<span>Add me</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue