add the whole thing I guess
This commit is contained in:
10
app.py
Normal file
10
app.py
Normal file
@@ -0,0 +1,10 @@
|
||||
from flask import Flask, render_template
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
return render_template("index.html")
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host="0.0.0.0", port=5000, debug=True)
|
||||
73
static/style.css
Normal file
73
static/style.css
Normal file
@@ -0,0 +1,73 @@
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: radial-gradient(circle at top, #1e293b, #020617);
|
||||
color: #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.weekly-title {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
color: #cbd5f5;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: #020617;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.progress-bar.weekly {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.progress-fill.daily {
|
||||
background: linear-gradient(90deg, #22c55e, #86efac);
|
||||
box-shadow: 0 0 12px rgba(34,197,94,0.6);
|
||||
}
|
||||
|
||||
.progress-fill.weekly-fill {
|
||||
background: linear-gradient(90deg, #6366f1, #a5b4fc);
|
||||
box-shadow: 0 0 10px rgba(99,102,241,0.6);
|
||||
}
|
||||
|
||||
.percent {
|
||||
margin-top: 0.6rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weekly-percent {
|
||||
font-size: 0.95rem;
|
||||
color: #c7d2fe;
|
||||
}
|
||||
91
templates/index.html
Normal file
91
templates/index.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Work Week Progress</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Workday Progress</h1>
|
||||
<div class="status" id="statusText"></div>
|
||||
|
||||
<!-- Daily Progress -->
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill daily" id="dailyFill"></div>
|
||||
</div>
|
||||
<div class="percent" id="dailyPercent">0%</div>
|
||||
|
||||
<!-- Weekly Progress -->
|
||||
<h2 class="weekly-title">Work Week Progress</h2>
|
||||
<div class="progress-bar weekly">
|
||||
<div class="progress-fill weekly-fill" id="weeklyFill"></div>
|
||||
</div>
|
||||
<div class="percent weekly-percent" id="weeklyPercent">0%</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const WORK_START_HOUR = 7;
|
||||
const WORK_START_MINUTE = 0;
|
||||
const WORK_END_HOUR = 17;
|
||||
const WORK_END_MINUTE = 30;
|
||||
|
||||
const TOTAL_WORK_MINUTES = 630; // 10.5 hours
|
||||
const WORK_DAYS = [0, 1, 2, 3]; // Sunday → Wednesday
|
||||
const WEEKLY_DAY_WEIGHT = 100 / WORK_DAYS.length;
|
||||
|
||||
function updateProgress() {
|
||||
const now = new Date();
|
||||
const day = now.getDay();
|
||||
|
||||
const statusText = document.getElementById("statusText");
|
||||
const dailyFill = document.getElementById("dailyFill");
|
||||
const weeklyFill = document.getElementById("weeklyFill");
|
||||
const dailyPercentText = document.getElementById("dailyPercent");
|
||||
const weeklyPercentText = document.getElementById("weeklyPercent");
|
||||
|
||||
let dailyPercent = 0;
|
||||
|
||||
const start = new Date(now);
|
||||
start.setHours(WORK_START_HOUR, WORK_START_MINUTE, 0, 0);
|
||||
|
||||
const end = new Date(now);
|
||||
end.setHours(WORK_END_HOUR, WORK_END_MINUTE, 0, 0);
|
||||
|
||||
const isWorkday = WORK_DAYS.includes(day);
|
||||
|
||||
if (!isWorkday) {
|
||||
statusText.textContent = "Not a workday 😌";
|
||||
} else if (now < start) {
|
||||
statusText.textContent = "Workday hasn't started yet";
|
||||
} else if (now > end) {
|
||||
dailyPercent = 100;
|
||||
statusText.textContent = "Workday complete 🎉";
|
||||
} else {
|
||||
const elapsedMinutes = Math.floor((now - start) / 60000);
|
||||
dailyPercent = Math.min((elapsedMinutes / TOTAL_WORK_MINUTES) * 100, 100);
|
||||
statusText.textContent = "Grinding…";
|
||||
}
|
||||
|
||||
// Apply daily progress
|
||||
dailyFill.style.width = dailyPercent + "%";
|
||||
dailyPercentText.textContent = dailyPercent.toFixed(1) + "%";
|
||||
|
||||
// Weekly progress
|
||||
let completedDays = WORK_DAYS.filter(d => d < day).length;
|
||||
let weeklyPercent =
|
||||
(completedDays * WEEKLY_DAY_WEIGHT) +
|
||||
(isWorkday ? (dailyPercent / 100) * WEEKLY_DAY_WEIGHT : 0);
|
||||
|
||||
weeklyPercent = Math.min(weeklyPercent, 100);
|
||||
|
||||
weeklyFill.style.width = weeklyPercent + "%";
|
||||
weeklyPercentText.textContent = weeklyPercent.toFixed(1) + "%";
|
||||
}
|
||||
|
||||
updateProgress();
|
||||
setInterval(updateProgress, 60 * 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user