4b7c01e632
Adds a full translation layer (English + European Portuguese) using
BurntSushi/toml with go:embed. Locale detection reads the lang cookie,
falls back to Accept-Language, then defaults to "en". A language switcher
in the nav writes the cookie and redirects back. All 20 personal finance
templates now use {{.T.Get "key"}} for every UI string.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
115 lines
5.5 KiB
HTML
115 lines
5.5 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "content"}}
|
|
{{$d := .}}
|
|
<style>
|
|
.hh-hero { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
|
|
.hh-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px; flex:1; min-width:160px; }
|
|
.hh-card h3 { margin:0 0 4px; font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
|
|
.hh-card .val { font-size:1.5rem; font-weight:700; }
|
|
.section-title { font-size:1rem; font-weight:700; margin:24px 0 12px; }
|
|
.partner-form { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:480px; }
|
|
.partner-form label { display:block; font-size:0.85rem; color:var(--muted); margin-bottom:6px; }
|
|
.partner-form input { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; box-sizing:border-box; }
|
|
.btn { padding:8px 20px; border:none; border-radius:8px; font-size:0.9rem; font-weight:600; cursor:pointer; }
|
|
.btn-primary { background:var(--accent); color:#fff; }
|
|
.btn-danger { background:#f44336; color:#fff; }
|
|
.goals-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
|
.goal-row { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); font-size:0.9rem; }
|
|
.goal-row:last-child { border-bottom:none; }
|
|
.badge { padding:2px 8px; border-radius:20px; font-size:0.72rem; font-weight:600; }
|
|
.badge-committed { background:rgba(76,175,80,0.15); color:#4caf50; }
|
|
</style>
|
|
|
|
<h1 style="margin:0 0 24px;">{{$d.T.Get "household.title"}}</h1>
|
|
|
|
{{if not $d.HasHousehold}}
|
|
<div class="partner-form">
|
|
<h2 style="margin:0 0 16px; font-size:1.1rem;">{{$d.T.Get "household.link_title"}}</h2>
|
|
<p style="font-size:0.85rem; color:var(--muted); margin:0 0 20px;">
|
|
{{$d.T.Get "household.link_desc"}}
|
|
</p>
|
|
<form method="post" action="/household">
|
|
<label for="partner_email">{{$d.T.Get "household.label_partner_email"}}</label>
|
|
<input type="email" id="partner_email" name="partner_email" placeholder="{{$d.T.Get "household.placeholder_email"}}" required style="margin-bottom:16px;">
|
|
<button type="submit" class="btn btn-primary" style="width:100%;">{{$d.T.Get "household.btn_link"}}</button>
|
|
</form>
|
|
</div>
|
|
{{else}}
|
|
|
|
<div style="display:flex; align-items:center; gap:12px; margin-bottom:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:0.8rem; color:var(--muted);">{{$d.T.Get "household.linked_partner"}}</div>
|
|
<div style="font-weight:600;">{{$d.PartnerEmail}}</div>
|
|
</div>
|
|
<button class="btn btn-danger" onclick="unlinkHousehold()" style="font-size:0.8rem; padding:6px 14px;">{{$d.T.Get "household.btn_unlink"}}</button>
|
|
</div>
|
|
|
|
<div class="section-title">{{$d.T.Get "household.this_month_title"}}</div>
|
|
<div class="hh-hero">
|
|
<div class="hh-card">
|
|
<h3>{{$d.T.Get "household.combined_income"}}</h3>
|
|
<div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>{{$d.T.Get "household.my_income"}}</h3>
|
|
<div class="val">€{{cents $d.MyIncomeCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>{{$d.T.Get "household.partner_income"}}</h3>
|
|
<div class="val">€{{cents $d.PartnerIncomeCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>{{$d.T.Get "household.combined_expenses"}}</h3>
|
|
<div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>{{$d.T.Get "household.disposable"}}</h3>
|
|
{{if ge $d.CombinedDisposable 0}}
|
|
<div class="val" style="color:#4caf50;">€{{cents $d.CombinedDisposable}}</div>
|
|
{{else}}
|
|
<div class="val" style="color:#f44336;">-€{{cents (centsAbs $d.CombinedDisposable)}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
{{if or $d.MyGoals $d.PartnerGoals}}
|
|
<div class="section-title">{{$d.T.Get "household.goals_title"}}</div>
|
|
<div class="goals-grid">
|
|
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
|
|
<div style="padding:12px 16px; font-weight:600; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted);">{{$d.T.Get "household.your_goals"}}</div>
|
|
{{range $d.MyGoals}}
|
|
<div class="goal-row">
|
|
<span>{{.Name}}</span>
|
|
{{if .Committed}}<span class="badge badge-committed">{{$d.T.Get "household.committed_badge"}}</span>{{end}}
|
|
</div>
|
|
{{else}}
|
|
<div style="padding:16px; color:var(--muted); font-size:0.85rem;">{{$d.T.Get "household.no_goals"}}</div>
|
|
{{end}}
|
|
</div>
|
|
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
|
|
<div style="padding:12px 16px; font-weight:600; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted);">{{$d.T.Get "household.partner_goals"}}</div>
|
|
{{range $d.PartnerGoals}}
|
|
<div class="goal-row">
|
|
<span>{{.Name}}</span>
|
|
{{if .Committed}}<span class="badge badge-committed">{{$d.T.Get "household.committed_badge"}}</span>{{end}}
|
|
</div>
|
|
{{else}}
|
|
<div style="padding:16px; color:var(--muted); font-size:0.85rem;">{{$d.T.Get "household.no_goals"}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{end}}
|
|
|
|
<script>
|
|
const CONFIRM_UNLINK = {{$d.T.Get "household.confirm_unlink" | printf "%q"}};
|
|
function unlinkHousehold() {
|
|
if (!confirm(CONFIRM_UNLINK)) return;
|
|
fetch('/household', { method: 'DELETE' })
|
|
.then(r => { if (r.ok) location.reload(); });
|
|
}
|
|
</script>
|
|
{{end}}
|