[2024-08-10] Add CSS, templates, and marathon comparison
This commit is contained in:
parent
fb1bde579d
commit
5b717ddf11
77
static/style.css
Normal file
77
static/style.css
Normal 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
24
templates/index.html
Normal 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>
|
@ -1,6 +1,7 @@
|
|||||||
import datetime
|
import datetime
|
||||||
|
import math
|
||||||
|
|
||||||
from flask import Flask
|
from flask import Flask, render_template, url_for
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
|
|
||||||
def num2day(num):
|
def num2day(num):
|
||||||
@ -19,38 +20,41 @@ def num2day(num):
|
|||||||
def workWeek(yearPercent):
|
def workWeek(yearPercent):
|
||||||
totalNumHours = 40*yearPercent
|
totalNumHours = 40*yearPercent
|
||||||
numDays = totalNumHours/8
|
numDays = totalNumHours/8
|
||||||
hoursIntoDay = (numDays - round(numDays))*8
|
hoursIntoDay = (numDays - math.floor(numDays))*8
|
||||||
minutesIntoDay = round((hoursIntoDay - round(hoursIntoDay))*60)
|
minutesIntoDay = round((hoursIntoDay - math.floor(hoursIntoDay))*60)
|
||||||
workDatetime = datetime.datetime(year=1970,month=1,day=1,hour=round(hoursIntoDay)+9,minute=minutesIntoDay)
|
workDatetime = datetime.datetime(year=1970,month=1,day=1,hour=math.floor(hoursIntoDay)+9,minute=minutesIntoDay)
|
||||||
workTime = workDatetime.strftime("%-I:%M%p")
|
workTime = workDatetime.strftime("%-I:%M%p")
|
||||||
return num2day(round(numDays+1)), workTime
|
return num2day(math.floor(numDays+1)), workTime
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
def getTemplate():
|
def getTemplate():
|
||||||
now = datetime.datetime.now()
|
now = datetime.datetime.now()
|
||||||
nowTime = now.strftime("%-I:%M%p")
|
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)
|
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)
|
totalDays = datetime.datetime(day=1,month=1,year=now.year+1) - datetime.datetime(day=1,month=1,year=now.year)
|
||||||
|
|
||||||
yearPercent = delta/totalDays
|
yearPercent = delta/totalDays
|
||||||
|
footballMinute = math.floor(yearPercent*90)
|
||||||
workDay, workTime = workWeek(yearPercent)
|
workDay, workTime = workWeek(yearPercent)
|
||||||
template = f"It is currently {nowTime}, on {nowDate}.<br>"
|
marathonMile = 26.2 - math.floor(yearPercent*26.2)
|
||||||
template += f"We are {round(yearPercent*100,2)}% of the way through {now.year}.<br>"
|
|
||||||
template += "To put that into context:<br>"
|
return now.year, nowTime, nowDate, round(yearPercent*100,2), footballMinute, workDay, workTime, marathonMile
|
||||||
template += "If the year were<br>"
|
|
||||||
template += "    a 90 minute football match,<br>"
|
|
||||||
template += f"        it would be the {round(yearPercent*90)}th minute.<br>"
|
|
||||||
template += "    a 40 hour work week,<br>"
|
|
||||||
template += f"        it would be {workTime} on {workDay}.<br>"
|
|
||||||
return template
|
|
||||||
|
|
||||||
#abbey road
|
#abbey road
|
||||||
#marathon
|
|
||||||
#the hobbit
|
#the hobbit
|
||||||
|
|
||||||
@app.route("/")
|
@app.route("/")
|
||||||
def hello_world():
|
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)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user