From 11a5f62d68a81a9cc493631026cdceed8a53e538 Mon Sep 17 00:00:00 2001 From: Stefan Koelle Date: Fri, 1 May 2026 22:07:23 +0200 Subject: [PATCH] Add/update meeting tracker variants and English build --- Readme.md | 63 +++++ meeting-cost-prompt.md | 85 +++++++ meeting-tracker-de.html | 274 ++++++++++++++++++++++ meeting-tracker-en.html | 170 ++++++++++++++ meeting-tracker-variant1.html | 381 +++++++++++++++++++++++++++++++ meeting-tracker-variant2-en.html | 46 ++++ meeting-tracker-variant2.html | 234 +++++++++++++++++++ meeting-tracker-variant3.html | 288 +++++++++++++++++++++++ 8 files changed, 1541 insertions(+) create mode 100644 Readme.md create mode 100644 meeting-cost-prompt.md create mode 100644 meeting-tracker-de.html create mode 100644 meeting-tracker-en.html create mode 100644 meeting-tracker-variant1.html create mode 100644 meeting-tracker-variant2-en.html create mode 100644 meeting-tracker-variant2.html create mode 100644 meeting-tracker-variant3.html diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..2e1670e --- /dev/null +++ b/Readme.md @@ -0,0 +1,63 @@ +# Meeting Cost Tracker + +A small single-page tool that shows, in real time, how much a meeting is costing while it runs. + +It is intentionally simple: enter how many developers are present, enter the average monthly gross salary, press **Start**, and the page begins counting the cost every second. + +## What it calculates + +The tracker estimates meeting cost from salary, employer overhead, team size, and elapsed time. The calculation is based on the idea that one developer’s salary can be converted into an annual employer cost, then into a working-hour and working-second cost. Similar meeting-cost tools commonly start from annual salary, convert it to an hourly rate, and multiply by meeting duration and headcount. [meetingtoll](https://www.meetingtoll.com/blog/meeting-cost-formula-per-employee) + +## Formula + +The app uses this formula: + +\[ +AnnualSalary = AvgMonthlySalary \times 12 +\] + +\[ +AnnualSalaryWithEmployerContribution = AnnualSalary \times 1.2 +\] + +\[ +TotalAnnualCost = AnnualSalaryWithEmployerContribution \times DevelopersPresent +\] + +\[ +CostPerSecond = \frac{TotalAnnualCost}{220 \times 8 \times 60 \times 60} +\] + +The 1.2 multiplier is a simplified overhead factor for employer contributions, which is in the same rough range as public Germany payroll references that place employer burden around 20 to 23 percent above gross salary. [boundlesshq](https://boundlesshq.com/blog/payroll-in-germany/) + +## Why 220 days + +The app divides by 220 working days instead of 365 calendar days. That makes the result closer to actual working time, because meetings happen during paid work, not across the full calendar year. [capme](https://www.capme.app/meeting-cost-calculator) + +Using 220 days, 8 hours per day, and 60 minutes per hour is a practical simplification that turns annual cost into a live per-second burn rate. It is not a payroll-grade accounting model, but it is a useful way to visualize meeting cost in real time. [meetingking](https://meetingking.com/meeting-cost-calculator/) + +## Example + +If 5 developers are present and the average monthly gross salary is 5,000 €: + +- Annual salary per developer: 60,000 € +- Annual salary incl. employer contribution: 72,000 € +- Total annual cost for the meeting: 360,000 € +- Cost per second: about 0.0568 € +- Cost per minute: about 3.41 € +- Cost per hour: about 204.55 € + +These numbers are consistent with the formula above. + +## Controls + +- **Start** begins the live counter at zero. +- **Reset** stops the counter and sets the accumulated cost back to zero. +- The cost per second is recalculated whenever the inputs change. +- The accumulated cost updates once per second while the counter is running. + +## Notes + +This tool is designed to make meeting costs visible, not to produce exact payroll accounting. In real companies, the true employer cost can vary by insurance rates, caps, bonuses, and other overhead, so the 1.2 factor should be understood as a simple approximation. [payrollgermany](https://payrollgermany.de/blog/employer-contributions-to-social-security-in-germany-a-comprehensive-guide/) + +The result is best used as a conversation starter: it helps teams notice how quickly meeting time turns into money. \ No newline at end of file diff --git a/meeting-cost-prompt.md b/meeting-cost-prompt.md new file mode 100644 index 0000000..db3f384 --- /dev/null +++ b/meeting-cost-prompt.md @@ -0,0 +1,85 @@ +# Prompt: Meeting Cost Tracker — HTML App + +Build a single, self-contained HTML page (no external dependencies except CDN fonts/icons) that calculates and displays the live running cost of a software engineering meeting. + +--- + +## Layout & Inputs + +On page load, show two input fields and two buttons: + +- **Input 1** — Label: "Developers present", type: number, integer, min 1, no default value +- **Input 2** — Label: "Avg. monthly gross salary (€)", type: number, pre-filled with `5000` +- **Start button** — starts the cost counter from zero +- **Reset button** — stops the counter and resets the displayed cost back to zero; inputs remain editable + +--- + +## Display + +Below the inputs, show two display areas (visible at all times, initially showing zero): + +1. **Large display — "Total cost so far"** + - Updates every second while the counter is running + - Shows the accumulated cost since Start was clicked + - Format: German locale with 2 decimal places, e.g. `1.234,56 €` + - This should be the visually dominant element on the page (large font, prominent placement) + +2. **Smaller display — "Cost per second"** + - Shows the calculated `CostPerSecond` value (static — only changes when inputs change) + - Same number format: `0,03 €` + +--- + +## Calculation + +``` +AnnualSalary = AvgMonthlySalary × 12 +AnnualSalaryWithEmployerContributions = AnnualSalary × 1.2 +TotalAnnualCost = AnnualSalaryWithEmployerContributions × DevelopersPresent +CostPerSecond = TotalAnnualCost ÷ 220 days ÷ 8 hours ÷ 60 minutes ÷ 60 seconds +``` + +> **Note on 220 days:** This uses 220 working days per year (accounts for weekends and public holidays), not 365 calendar days — this gives a more accurate cost-per-working-second figure. + +The `CostPerSecond` value must be recalculated whenever the inputs change. If the counter is running while the user changes an input, the new rate applies immediately to subsequent seconds. + +--- + +## Button Behavior + +- **Start**: Begins the interval counter (1-second tick). Disabled while counter is running. +- **Reset**: Stops the counter, sets accumulated cost display back to `0,00 €`, re-enables the Start button. +- There is no Pause. Reset is the only way to stop the counter. + +--- + +## Validation + +Before starting the counter, validate: +- "Developers present" must be a whole number ≥ 1 +- "Avg. monthly gross salary" must be > 0 +- Show a clear inline error message if validation fails; do not start the counter + +--- + +## Design & UX + +- Single-page, fully self-contained HTML file +- No frameworks required — vanilla HTML, CSS, JS is preferred +- Clean, modern dark UI — this will be used on a screen during internal meetings +- The "Total cost so far" number should be the largest visual element on the page — make it dramatic and easy to read from across a room +- The page should work well at 1080p (1920×1080) full-screen in a browser +- Include a subtle visual indicator (e.g. pulsing dot or color change) when the counter is actively running +- No localStorage, no cookies, no server-side code + +--- + +## Example Values (for testing) + +- 8 developers, €5,000 avg salary +- AnnualSalary = 60,000 € +- AnnualSalaryWithEmployerContributions = 72,000 € +- TotalAnnualCost = 576,000 € +- CostPerSecond = 576,000 ÷ 220 ÷ 8 ÷ 3,600 ≈ **0.0909 €/sec** +- After 60 seconds: ≈ 5,45 € diff --git a/meeting-tracker-de.html b/meeting-tracker-de.html new file mode 100644 index 0000000..de2bb7c --- /dev/null +++ b/meeting-tracker-de.html @@ -0,0 +1,274 @@ + + + + + +Meeting Cost Tracker + + + + + + +
+ + +
+
+
+
+ + +
Anzahl der Teilnehmer
+
+
+ +
+ EUR + +
+
Brutto, durchschnittlich
+
+ +
+
+
+ + + Bereit + + +
+
+
Verbrauchte Meeting-Kosten
+
+ EUR0,00 +
+
Noch nicht gestartet
+
+ +
+ + + diff --git a/meeting-tracker-en.html b/meeting-tracker-en.html new file mode 100644 index 0000000..353ae64 --- /dev/null +++ b/meeting-tracker-en.html @@ -0,0 +1,170 @@ + + + + + + Meeting Cost Tracker — English + + + + + + +
+
+ +
+
Meeting Cost Tracker
+
Live meeting cost overview
+
+
+ +
+ +
+
+
+ + +
number of participants
+
+
+ +
+ EUR + +
+
brutto, avarage salary
+
+ +
+
+ +
+ Ready + +
+ +
+
Total cost so far
+
EUR0.00
+
Not started
+
+ + +
+ + + + diff --git a/meeting-tracker-variant1.html b/meeting-tracker-variant1.html new file mode 100644 index 0000000..e5c5d31 --- /dev/null +++ b/meeting-tracker-variant1.html @@ -0,0 +1,381 @@ + + + + + +Meeting Kostenuhr + + + + + + + +
+ + +
+ +
+
+
+
+ + +
+
+ +
+ + €/Mo +
+
+ +
+ + + + +
+
+ + + + +

Entwickler-Anzahl und Gehalt eingeben, dann Start drücken

+
+
+ +
+
+ Kosten pro Sekunde + — +
+ + +
+
+ + + + \ No newline at end of file diff --git a/meeting-tracker-variant2-en.html b/meeting-tracker-variant2-en.html new file mode 100644 index 0000000..3bd92aa --- /dev/null +++ b/meeting-tracker-variant2-en.html @@ -0,0 +1,46 @@ + + + + + +Meeting Cost Tracker (EN) + + + +
+

Meeting Cost Tracker

+
+ + +
+
+ + +
+
+ + +
+
+
+
Total cost so far
+
0,00 €
+
Cost per second: 0,00 €
+
+
+ + + diff --git a/meeting-tracker-variant2.html b/meeting-tracker-variant2.html new file mode 100644 index 0000000..526aba1 --- /dev/null +++ b/meeting-tracker-variant2.html @@ -0,0 +1,234 @@ + + + + + + Meeting Cost Tracker + + + + +
+
+
+ + + +
+ +
+ + + +
+ +
+ + +
+ +
+ +
+
+
Counter status
+
+
+ +
+
+
Total cost so far
+
0,00 €
+
+ +
+
Cost per second
+
0,00 €
+
Using 220 working days · employer contributions ×1.2
+
+
+
+ + + + diff --git a/meeting-tracker-variant3.html b/meeting-tracker-variant3.html new file mode 100644 index 0000000..513affb --- /dev/null +++ b/meeting-tracker-variant3.html @@ -0,0 +1,288 @@ + + + + + + Software-Entwickler Kostenzähler + + + +
+

Software-Entwickler Kostenzähler

+

Live-Anzeige der laufenden Kosten während einer Besprechung oder Wartezeit.

+ +
+
+ + +
+ +
+ + +
+ + +
+ +
Bitte gültige Werte größer als 0 eingeben.
+ +
+
Bisher verbraucht
+
0,00 €
+
+ +
+
+
Kosten pro Sekunde
+
0,00 €
+
+
+
Gesamtkosten pro Jahr
+
0,00 €
+
+
+
Laufzeit
+
0 s
+
+
+ +
+ Berechnung:
+ Jahresgehalt = Durchschnittsgehalt × 12
+ Jahresgehalt mit Arbeitgeberanteil = Jahresgehalt × 1,2
+ Gesamtkosten = Jahresgehalt mit Arbeitgeberanteil × Software-Entwickler anwesend
+ Kosten pro Sekunde = Gesamtkosten ÷ 365 Tage ÷ 8 Stunden ÷ 60 Minuten ÷ 60 Sekunden +
+
+ + + +