[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 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 += "    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
|
||||
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)
|
||||
|
Loading…
x
Reference in New Issue
Block a user