mirror of
https://github.com/skoelle/PeopleCostCounter.git
synced 2026-09-17 20:00:25 +00:00
47 lines
2.1 KiB
HTML
47 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Meeting Cost Tracker (EN)</title>
|
|
<style>
|
|
/* Minimal styles to match variant2 look */
|
|
body{font-family:Inter,system-ui,sans-serif;background:#f7f6f2;color:#28251d;padding:40px}
|
|
.card{max-width:900px;margin:0 auto;background:#fff;padding:20px;border-radius:12px}
|
|
.label{font-size:12px;color:#6b7280}
|
|
.big{font-family:monospace;font-size:48px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Meeting Cost Tracker</h1>
|
|
<div>
|
|
<label class="label">Developers present</label>
|
|
<input id="devCount" type="number" value="5" min="1" />
|
|
</div>
|
|
<div>
|
|
<label class="label">Avg monthly gross salary (€)</label>
|
|
<input id="avgSalary" type="number" value="5000" min="1" />
|
|
</div>
|
|
<div style="margin-top:12px">
|
|
<button id="startBtn">Start</button>
|
|
<button id="resetBtn">Reset</button>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="label">Total cost so far</div>
|
|
<div id="total" class="big">0,00 €</div>
|
|
<div class="label">Cost per second: <span id="perSec">0,00 €</span></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
/* Simple duplicate of variant2 calculations in English */
|
|
function fmt(n){return n.toLocaleString('de-DE',{minimumFractionDigits:2,maximumFractionDigits:2})+' €'}
|
|
function calc(){var d=Number(document.getElementById('devCount').value)||1;var s=Number(document.getElementById('avgSalary').value)||5000;var annual=s*12;var withEmp=annual*1.2;var total=withEmp*d;var perSec=total/220/8/3600;return{d:d,s:s,annual:annual,withEmp:withEmp,total:total,perSec:perSec}}
|
|
var timer=null, acc=0;
|
|
document.getElementById('startBtn').addEventListener('click',function(){ if(timer) return; var p=calc(); timer=setInterval(function(){acc+=p.perSec;document.getElementById('total').textContent=fmt(acc);},1000); document.getElementById('perSec').textContent=fmt(calc().perSec);});
|
|
document.getElementById('resetBtn').addEventListener('click',function(){ clearInterval(timer);timer=null;acc=0;document.getElementById('total').textContent=fmt(0);});
|
|
</script>
|
|
</body>
|
|
</html>
|