[2024-08-10] Add CSS, templates, and marathon comparison

This commit is contained in:
Andrew Conlin 2024-08-10 21:26:41 +01:00
parent fb1bde579d
commit 5b717ddf11
3 changed files with 124 additions and 19 deletions

77
static/style.css Normal file
View File

@ -0,0 +1,77 @@
body {
font-family: sans-serif;
text-align: center;
}
span.red {
color: white;
background: red;
border-radius: 5px;
padding: 5px;
}
span.orange {
color: white;
background: orange;
border-radius: 5px;
padding: 5px;
}
span.green {
color: white;
background: green;
border-radius: 5px;
padding: 5px;
}
progress {
border-radius: 5px;
width: 80%;
height: 22px;
}
progress::-webkit-progress-bar {
background-color: green;
border-radius: 5px;
}
progress::-webkit-progress-value {
background-color: green;
border-radius: 5px;
}
progress::-moz-progress-bar {
background-color: green;
border-radius: 5px;
}
div.content {
width: 50%;
height: auto;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 1440px) {
div.content {
width: 60%;
height: auto;
margin: 0 auto;
position: relative;
}
}
@media screen and (max-width: 1080px) {
div.content {
width: 80%;
height: auto;
margin: 0 auto;
position: relative;
}
}
@media screen and (max-width: 768px) {
div.content {
width: 100%;
height: auto;
margin: 0 auto;
position: relative;
}
}

24
templates/index.html Normal file
View File

@ -0,0 +1,24 @@
<html>
<head>
<link href="{{ cssPath }}" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="content">
<h1><strong><strong>It is currently <span class="red">{{ nowTime }}</span> on <span class="orange">{{ nowDate }}</span>.</strong></strong></h1><br>
<h2>
We are <span class="green">{{ yearPercent }}%</span> of the way through {{ year }}.<br><br>
<progress id="file" max="100" value="{{ yearPercent }}">{{ yearPercent }}%</progress><br>
<br>
</h2>
To put that into context:<br>
If the year were<br>
a 90 minute football match,<br>
it would be the {{ footballMinute }}th minute.<br>
a 40 hour work week,<br>
it would be {{ workTime }} on {{ workDay }}.<br>
a marathon,<br>
you would have {{ marathonMile }} miles to go.<br>
</div>
</body>
</html>

View File

@ -1,6 +1,7 @@
import datetime
import math
from flask import Flask
from flask import Flask, render_template, url_for
app = Flask(__name__)
def num2day(num):
@ -19,38 +20,41 @@ def num2day(num):
def workWeek(yearPercent):
totalNumHours = 40*yearPercent
numDays = totalNumHours/8
hoursIntoDay = (numDays - round(numDays))*8
minutesIntoDay = round((hoursIntoDay - round(hoursIntoDay))*60)
workDatetime = datetime.datetime(year=1970,month=1,day=1,hour=round(hoursIntoDay)+9,minute=minutesIntoDay)
hoursIntoDay = (numDays - math.floor(numDays))*8
minutesIntoDay = round((hoursIntoDay - math.floor(hoursIntoDay))*60)
workDatetime = datetime.datetime(year=1970,month=1,day=1,hour=math.floor(hoursIntoDay)+9,minute=minutesIntoDay)
workTime = workDatetime.strftime("%-I:%M%p")
return num2day(round(numDays+1)), workTime
return num2day(math.floor(numDays+1)), workTime
def getTemplate():
now = datetime.datetime.now()
nowTime = now.strftime("%-I:%M%p")
nowDate = now.strftime("%x")
nowDate = now.strftime("%A") + " " + now.strftime("%-d") + " " + now.strftime("%B")
delta = now - datetime.datetime(day=1,month=1,year=now.year)
totalDays = datetime.datetime(day=1,month=1,year=now.year+1) - datetime.datetime(day=1,month=1,year=now.year)
yearPercent = delta/totalDays
footballMinute = math.floor(yearPercent*90)
workDay, workTime = workWeek(yearPercent)
template = f"It is currently {nowTime}, on {nowDate}.<br>"
template += f"We are {round(yearPercent*100,2)}% of the way through {now.year}.<br>"
template += "To put that into context:<br>"
template += "If the year were<br>"
template += "&nbsp&nbsp&nbsp&nbspa 90 minute football match,<br>"
template += f"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspit would be the {round(yearPercent*90)}th minute.<br>"
template += "&nbsp&nbsp&nbsp&nbspa 40 hour work week,<br>"
template += f"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspit would be {workTime} on {workDay}.<br>"
return template
marathonMile = 26.2 - math.floor(yearPercent*26.2)
return now.year, nowTime, nowDate, round(yearPercent*100,2), footballMinute, workDay, workTime, marathonMile
#abbey road
#marathon
#the hobbit
@app.route("/")
def hello_world():
return getTemplate()
year, nowTime, nowDate, yearPercent, footballMinute, workDay, workTime, marathonMile = getTemplate()
cssPath = url_for('static', filename='style.css')
return render_template("index.html",\
cssPath=cssPath,\
year=year,\
nowTime=nowTime,\
nowDate=nowDate,\
yearPercent=yearPercent,\
footballMinute=footballMinute,\
workDay=workDay,\
workTime=workTime,\
marathonMile=marathonMile)