m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
68552cac15393be9982c76a8359356a7cf1125ee
onepager/sites/billableaua.de/index.html

479 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billable Aua.</title>
<meta name="description" content="Billable Hours. Das Vergütungsmodell, das Effizienz bestraft und Leidensfähigkeit belohnt.">
<meta name="robots" content="noindex, nofollow">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>.</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #0a0a0a;
--text: #e8e8e8;
--text-dim: #777;
--text-muted: #444;
--red: #cc2222;
--red-glow: rgba(204, 34, 34, 0.15);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
.wrap {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
}
/* Hero */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero::after {
content: '';
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 80px;
background: linear-gradient(to bottom, var(--text-muted), transparent);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
h1 {
font-size: clamp(5rem, 15vw, 12rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 0.9;
text-transform: uppercase;
text-align: center;
animation: fadeIn 1.2s ease-out;
}
h1 .dot {
color: var(--red);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Divider */
.line {
height: 1px;
background: var(--text-muted);
opacity: 0.3;
}
/* Numbers */
.numbers {
padding: 120px 0;
text-align: center;
}
.numbers p {
font-size: clamp(1.3rem, 3vw, 1.8rem);
font-weight: 300;
color: var(--text-dim);
line-height: 1.8;
max-width: 640px;
margin: 0 auto;
}
.numbers .num {
color: var(--red);
font-weight: 700;
font-size: 1.15em;
}
/* Kritik */
.kritik {
padding: 80px 0 120px;
}
.kritik-item {
padding: 48px 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.3);
}
.kritik-item:first-child {
border-top: 1px solid rgba(68, 68, 68, 0.3);
}
.kritik-item p {
font-size: clamp(1.5rem, 4vw, 2.4rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--text);
}
.kritik-item .num {
color: var(--red);
font-weight: 700;
}
.kritik-item .dim {
color: var(--text-dim);
font-weight: 300;
}
/* Rechner */
.rechner {
padding: 120px 0;
}
.rechner h2 {
font-size: clamp(2.5rem, 7vw, 4rem);
font-weight: 900;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: 48px;
}
.rechner h2 .dot { color: var(--red); }
.rechner-grid {
display: flex;
gap: 32px;
margin-bottom: 48px;
}
.rechner-input {
flex: 1;
}
.rechner-input label {
display: block;
font-size: 0.9rem;
color: var(--text-dim);
font-weight: 300;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.rechner-input input {
width: 100%;
background: transparent;
border: 1px solid var(--text-muted);
color: var(--text);
font-family: inherit;
font-size: 2.4rem;
font-weight: 700;
padding: 12px 16px;
text-align: center;
outline: none;
transition: border-color 0.3s;
-moz-appearance: textfield;
}
.rechner-input input::-webkit-inner-spin-button,
.rechner-input input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.rechner-input input:focus {
border-color: var(--red);
}
.rechner-result {
font-size: clamp(1.3rem, 3vw, 1.8rem);
font-weight: 300;
color: var(--text-dim);
line-height: 2;
}
.rechner-result .num {
color: var(--red);
font-weight: 700;
font-size: 1.15em;
}
.rechner-result .verdict {
display: block;
margin-top: 24px;
font-size: clamp(1.5rem, 4vw, 2.2rem);
font-weight: 600;
color: var(--text);
}
@media (max-width: 640px) {
.rechner { padding: 80px 0; }
.rechner-grid { flex-direction: column; gap: 24px; }
}
/* Silence */
.silence {
padding: 160px 0;
text-align: center;
}
.silence p {
font-size: clamp(1rem, 2vw, 1.2rem);
color: var(--text-muted);
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Rechnung */
.rechnung {
max-width: 400px;
margin: 0 auto;
}
.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;
text-align: center;
border-top: 1px solid rgba(68, 68, 68, 0.2);
}
footer p {
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.05em;
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 640px) {
.numbers { padding: 80px 0; }
.kritik { padding: 40px 0 80px; }
.kritik-item { padding: 32px 0; }
.silence { padding: 100px 0; }
}
</style>
</head>
<body>
<section class="hero">
<h1>Billable<br>Aua<span class="dot">.</span></h1>
</section>
<div class="line"></div>
<section class="numbers">
<div class="wrap">
<p class="reveal">
Eine Zahl bestimmt deinen Wert.<br>
Nicht dein Ergebnis. Nicht dein Wissen.<br>
<span class="num">Billable Hours</span> &mdash; der einzige KPI, der z&auml;hlt.<br>
Jede Minute dokumentiert.<br>
Jede Pause ein Verlust.
</p>
</div>
</section>
<div class="line"></div>
<section class="kritik">
<div class="wrap">
<div class="kritik-item reveal">
<p>Effizienz wird bestraft. <span class="dim">Wer schneller arbeitet, verdient weniger.</span></p>
</div>
<div class="kritik-item reveal">
<p>Ineffizienz wird belohnt. <span class="dim">L&auml;nger brauchen hei&szlig;t mehr verdienen.</span></p>
</div>
<div class="kritik-item reveal">
<p>Verkauft wird nur, was auf der Rechnung steht. <span class="dim">Der Rest deiner Arbeit existiert nicht.</span></p>
</div>
<div class="kritik-item reveal">
<p>Und die anderen Stunden im B&uuml;ro? <span class="dim">Egal.</span></p>
</div>
<div class="kritik-item reveal">
<p>Die besten Ideen kommen nicht, <span class="dim">w&auml;hrend die Stoppuhr l&auml;uft.</span></p>
</div>
<div class="kritik-item reveal">
<p>Ein Leben im Sechs-Minuten-Takt <span class="dim">macht etwas mit deinem Bewusstsein.</span></p>
</div>
<div class="kritik-item reveal">
<p>Innovation ist ein Risiko. <span class="dim">Jedes Tool, das Zeit spart, bedroht den Umsatz.</span></p>
</div>
</div>
</section>
<div class="line"></div>
<section class="rechner">
<div class="wrap">
<h2 class="reveal">Rechne selbst<span class="dot">.</span></h2>
<div class="rechner-grid reveal">
<div class="rechner-input">
<label>Billable-Stunden / Jahr</label>
<input type="number" id="hours" value="1800" min="0" max="5000">
</div>
<div class="rechner-input">
<label>Urlaubstage</label>
<input type="number" id="vacation" value="25" min="0" max="60">
</div>
</div>
<div class="rechner-result reveal" id="result"></div>
</div>
</section>
<div class="line"></div>
<section class="silence">
<div class="wrap">
<p class="reveal">Kein Kontakt. Kein Newsletter. Kein Impressum.</p>
</div>
</section>
<footer>
<div class="wrap">
<p>billableaua.de &mdash; 2026</p>
</div>
</footer>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Rechner
function calculate() {
const hours = parseInt(document.getElementById('hours').value) || 0;
const vacation = parseInt(document.getElementById('vacation').value) || 0;
const weekends = 104;
const feiertage = 10;
const workingDays = 365 - weekends - vacation - feiertage;
const perDay = workingDays > 0 ? (hours / workingDays) : 0;
const perDayStr = perDay.toFixed(1).replace('.', ',');
let verdict = '';
if (perDay >= 7.96) {
verdict = '<span class="verdict">Das ist nicht nur ein Job. <span class="dim">Das ist ein Lifestyle.</span></span>';
} else if (perDay > 7) {
verdict = '<span class="verdict">Das ist die Theorie. <span class="dim">In der Praxis bist du l&auml;nger da.</span></span>';
} else if (perDay > 6) {
verdict = '<span class="verdict">Das sind nur die billable hours. <span class="dim">Dazu kommen Admin, Meetings, Mails &mdash; unbezahlt.</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 =
'<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 +
'<span class="verdict" style="margin-top:32px;font-size:0.85em;font-weight:300;color:var(--text-dim);display:block;">' +
(function() {
var base = hours / workingDays * 60;
var d1 = workingDays > 1 ? Math.round(hours / (workingDays - 1) * 60 - base) : 0;
var d2 = workingDays > 2 ? Math.round(hours / (workingDays - 2) * 60 - base) : 0;
var d5 = workingDays > 5 ? Math.round(hours / (workingDays - 5) * 60 - base) : 0;
return 'Ein Tag krank? +<span class="num">' + d1 + '</span> Minuten mehr an jedem anderen Tag. Jeden.' +
' Zwei Tage? +<span class="num">' + d2 + '</span>.' +
' Eine Woche? +<span class="num">' + d5 + '</span>.' +
'<br>Jeder verpasste Tag erh&ouml;ht den Druck auf alle anderen.';
})() +
'</span>';
}
document.getElementById('hours').addEventListener('input', calculate);
document.getElementById('vacation').addEventListener('input', calculate);
calculate();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink