Compare commits
12 Commits
e48221b1cd
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| ca4ac4c3ac | |||
| 6471d72b74 | |||
| 4e2d489632 | |||
| f964b6e344 | |||
| 3fbf19a271 | |||
| 35bce6e53d | |||
| 4c7d05abd0 | |||
| d77ed7ed31 | |||
| bcf994ab7b | |||
| 936ce2fc96 | |||
| 12c4553c81 | |||
| 3c2b3d1a88 |
36
README.md
36
README.md
@@ -1,4 +1,4 @@
|
||||
# Work Week Progress Bar
|
||||
# Day Drain
|
||||
|
||||
Because staring at the clock is bad for morale, but staring at a **progress bar** is somehow motivating.
|
||||
|
||||
@@ -9,18 +9,18 @@ This is a small Flask-powered web app that visualizes:
|
||||
It progresses **only during your scheduled work hours**
|
||||
|
||||
### Daily Progress Bar
|
||||
- Advances **every minute**
|
||||
- Only runs **Sunday–Wednesday**
|
||||
- Only between **7:00 AM – 5:30 PM**
|
||||
- Before work? Frozen.
|
||||
- After work? Done.
|
||||
- Not a workday? Blissfully idle.
|
||||
- Advances **every 10ms** (configurable)
|
||||
- Only runs **on workdays**
|
||||
- Only during **work hours**
|
||||
|
||||
### Weekly Progress Bar
|
||||
- Your work week is **4 days** (Sun–Wed)
|
||||
- Assumes your work week is **4 days**
|
||||
- Each day = **25%**
|
||||
- During the day, the bar fills smoothly
|
||||
- End of Wednesday = **100% freedom**
|
||||
- End of Workweek = **100% freedom**
|
||||
|
||||
### Demo Site
|
||||
https://daydrain.com
|
||||
|
||||
### Configuration
|
||||
|
||||
@@ -29,20 +29,4 @@ It progresses **only during your scheduled work hours**
|
||||
| WORK_START_TIME | 07:00 | Workday start (HH:MM) |
|
||||
| WORK_END_TIME | 17:30 | Workday end (HH:MM) |
|
||||
| WORK_DAYS | 0,1,2,3 | JS day numbers (Sun=0) |
|
||||
| UPDATE_INTERVAL_MS | 60000 | Update frequency |
|
||||
|
||||
### Configuration
|
||||
|
||||
| Variable | Default | Description |
|
||||
|--------|---------|-------------|
|
||||
| WORK_START_TIME | 07:00 | Workday start (HH:MM) |
|
||||
| WORK_END_TIME | 17:30 | Workday end (HH:MM) |
|
||||
| WORK_DAYS | 0,1,2,3 | JS day numbers (Sun=0) |
|
||||
| UPDATE_INTERVAL_MS | 60000 | Update frequency |
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Flask** – serves the page and minds its business
|
||||
- **Vanilla JavaScript** – handles all time logic client-side
|
||||
- **HTML + CSS** – gradients, glow, and just enough polish
|
||||
- **Zero databases** – this app remembers nothing, like a healthy coping mechanism
|
||||
| UPDATE_INTERVAL_MS | 10 | Update frequency |
|
||||
|
||||
2
app.py
2
app.py
@@ -27,7 +27,7 @@ def index():
|
||||
if d.strip().isdigit()
|
||||
]
|
||||
|
||||
update_interval = int(os.getenv("UPDATE_INTERVAL_MS", "60000"))
|
||||
update_interval = int(os.getenv("UPDATE_INTERVAL_MS", "10"))
|
||||
|
||||
return render_template(
|
||||
"index.html",
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Work Week Progress</title>
|
||||
<title>Day Drain</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>
|
||||
<h1>Day Drain</h1>
|
||||
<div class="status" id="statusText"></div>
|
||||
|
||||
<!-- Daily Progress -->
|
||||
@@ -49,9 +49,9 @@
|
||||
const WORK_DAYS = config.workDays;
|
||||
const UPDATE_INTERVAL = config.updateInterval;
|
||||
|
||||
const TOTAL_WORK_MINUTES =
|
||||
(WORK_END_HOUR * 60 + WORK_END_MINUTE) -
|
||||
(WORK_START_HOUR * 60 + WORK_START_MINUTE);
|
||||
const TOTAL_WORK_SECONDS =
|
||||
(WORK_END_HOUR * 3600 + WORK_END_MINUTE * 60) -
|
||||
(WORK_START_HOUR * 3600 + WORK_START_MINUTE * 60);
|
||||
|
||||
const WEEKLY_DAY_WEIGHT = 100 / WORK_DAYS.length;
|
||||
|
||||
@@ -83,17 +83,18 @@
|
||||
dailyPercent = 100;
|
||||
statusText.textContent = "Workday complete 🎉";
|
||||
} else {
|
||||
const elapsedMinutes = Math.floor((now - start) / 60000);
|
||||
const elapsedSeconds = (now - start) / 1000;
|
||||
|
||||
dailyPercent = Math.min(
|
||||
(elapsedMinutes / TOTAL_WORK_MINUTES) * 100,
|
||||
100
|
||||
(elapsedSeconds / TOTAL_WORK_SECONDS) * 100,
|
||||
100
|
||||
);
|
||||
statusText.textContent = "Grinding…";
|
||||
}
|
||||
|
||||
// Daily progress
|
||||
dailyFill.style.width = dailyPercent + "%";
|
||||
dailyPercentText.textContent = dailyPercent.toFixed(1) + "%";
|
||||
dailyPercentText.textContent = dailyPercent.toFixed(4) + "%";
|
||||
|
||||
// Weekly progress
|
||||
const completedDays = WORK_DAYS.filter(d => d < day).length;
|
||||
@@ -104,7 +105,7 @@
|
||||
weeklyPercent = Math.min(weeklyPercent, 100);
|
||||
|
||||
weeklyFill.style.width = weeklyPercent + "%";
|
||||
weeklyPercentText.textContent = weeklyPercent.toFixed(1) + "%";
|
||||
weeklyPercentText.textContent = weeklyPercent.toFixed(4) + "%";
|
||||
}
|
||||
|
||||
updateProgress();
|
||||
|
||||
Reference in New Issue
Block a user