m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: billableaua — invoice-style layout, lower thresholds

Browse Source 
Calculation now looks like an invoice with left-aligned labels and
right-aligned values. Verdict thresholds lowered: >8h lifestyle,
>6h warning, >4h "klingt machbar".
This commit is contained in:
m
2026-04-02 10:47:32 +02:00
parent 7702963902
commit 8992f6775f
1 changed files with 43 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
sites/billableaua.de/index.html
View File

@@ -256,6 +256,33 @@
text-transform: uppercase;
}
/* Rechnung */
.rechnung {
max-width: 400px;
}
.rechnung-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 300;
color: var(--text-dim);
padding: 4px 0;
}
.rechnung-row .label { text-align: left; }
.rechnung-row .value { text-align: right; font-weight: 700; color: var(--red); }
.rechnung-divider {
border: none;
border-top: 1px solid var(--text-muted);
margin: 12px 0;
}
.rechnung-total .label { font-weight: 600; color: var(--text); }
.rechnung-total .value { font-size: 1.15em; }
/* Footer */
footer {
padding: 40px 0;
@@ -402,21 +429,28 @@
const perDayStr = perDay.toFixed(1).replace('.', ',');
let verdict = '';
if (perDay > 10) {
if (perDay > 8) {
verdict = '<span class="verdict">Das ist kein Job. <span class="dim">Das ist ein Lifestyle.</span></span>';
} else if (perDay > 8) {
verdict = '<span class="verdict">Jeden Tag &uuml;ber <span class="num">8</span> Stunden billable. <span class="dim">Ohne Mittagspause, ohne Admin.</span></span>';
} else if (perDay > 6) {
verdict = '<span class="verdict">Jeden Tag &uuml;ber <span class="num">6</span> Stunden billable. <span class="dim">Und der Rest ist unbezahlte Arbeit.</span></span>';
} else if (perDay > 4) {
verdict = '<span class="verdict">Klingt machbar? <span class="dim">Vergiss nicht: billable &ne; Arbeitszeit.</span></span>';
}
var r = function(l, v) {
return '<div class="rechnung-row"><span class="label">' + l + '</span><span class="value">' + v + '</span></div>';
};
document.getElementById('result').innerHTML =
'<span class="num">365</span> Tage im Jahr<br>' +
'&minus; <span class="num">52</span> &times; 2 = <span class="num">104</span> Wochenendtage<br>' +
'&minus; <span class="num">' + vacation + '</span> Urlaubstage<br>' +
'&minus; <span class="num">' + feiertage + '</span> Feiertage<br>' +
'<span style="display:inline-block;width:160px;border-top:1px solid var(--text-muted);margin:12px 0;"></span><br>' +
'= <span class="num">' + workingDays + '</span> Arbeitstage<br><br>' +
'<div class="rechnung">' +
r('Tage im Jahr', '365') +
r('Wochenendtage (52 &times; 2)', '&minus; 104') +
r('Urlaubstage', '&minus; ' + vacation) +
r('Feiertage', '&minus; ' + feiertage) +
'<hr class="rechnung-divider">' +
'<div class="rechnung-row rechnung-total">' +
'<span class="label">Arbeitstage</span><span class="value">' + workingDays + '</span></div>' +
'</div><br>' +
'<span class="num">' + hours.toLocaleString('de-DE') + '</span> Stunden &divide; <span class="num">' + workingDays + '</span> Tage = ' +
'<span class="num">' + perDayStr + '</span> Stunden billable pro Tag.' +
verdict +