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>
114 lines
4.3 KiB
HTML
114 lines
4.3 KiB
HTML
{{define "content"}}
|
|
{{$d := .}}
|
|
<h1 style="margin-bottom:24px;">{{$d.T.Get "projections.title"}}</h1>
|
|
|
|
{{if $d.Projections}}
|
|
|
|
<div class="grid">
|
|
<div class="card value-card animate-on-scroll">
|
|
<h2>{{$d.T.Get "projections.card_annual_spend"}}</h2>
|
|
<div class="value negative animate-counter" data-target="{{$d.AnnualTotal}}" data-prefix="€">€0.00</div>
|
|
<p class="text-muted" style="margin-top:8px; font-size:12px;">{{$d.T.Get "projections.card_annual_sub"}}</p>
|
|
</div>
|
|
<div class="card value-card animate-on-scroll">
|
|
<h2>{{$d.T.Get "projections.card_monthly_spend"}}</h2>
|
|
{{$monthly := div $d.AnnualTotal 12}}
|
|
<div class="value negative animate-counter" data-target="{{$monthly}}" data-prefix="€">€0.00</div>
|
|
<p class="text-muted" style="margin-top:8px; font-size:12px;">{{$d.T.Get "projections.card_monthly_sub"}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card animate-on-scroll">
|
|
<h2 style="margin-bottom:16px;">{{$d.T.Get "projections.chart_title"}}</h2>
|
|
<div style="padding-top:4px;">
|
|
<canvas id="projChart" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card animate-on-scroll">
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{$d.T.Get "projections.table_col_category"}}</th>
|
|
<th class="text-right">{{$d.T.Get "projections.table_col_monthly_avg"}}</th>
|
|
<th class="text-right">{{$d.T.Get "projections.table_col_projected"}}</th>
|
|
<th style="width:180px;">{{$d.T.Get "projections.table_col_share"}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $d.Projections}}
|
|
{{$color := index $d.CategoryColors .Name}}
|
|
<tr>
|
|
<td>
|
|
<span style="display:inline-flex; align-items:center; gap:7px;">
|
|
{{if $color}}<span style="width:9px;height:9px;border-radius:50%;background:{{$color}};box-shadow:0 0 5px {{$color}}88;flex-shrink:0;"></span>{{end}}
|
|
<span style="font-weight:500;">{{.Name}}</span>
|
|
</span>
|
|
</td>
|
|
<td class="cents negative">€{{printf "%.2f" .MonthlyAvg}}</td>
|
|
<td class="cents negative">€{{printf "%.2f" .AnnualTotal}}</td>
|
|
<td>
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<div style="flex:1; background:var(--bg3); border-radius:6px; height:7px; overflow:hidden;">
|
|
<div style="height:100%; border-radius:6px; width:{{.PacePct}}%;
|
|
background:{{if $color}}{{$color}}{{else}}var(--accent){{end}};
|
|
box-shadow:{{if $color}}0 0 5px {{$color}}66{{else}}0 0 5px var(--accent-glow){{end}};"></div>
|
|
</div>
|
|
<span style="font-size:11.5px; color:var(--text3); min-width:30px; text-align:right;">{{.PacePct}}%</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const isDark = () => document.documentElement.getAttribute('data-theme') === 'dark';
|
|
const gridC = () => isDark() ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.06)';
|
|
const textC = () => isDark() ? '#5c6585' : '#8a92b0';
|
|
|
|
const catColors = { {{range $k,$v := $d.CategoryColors}}"{{$k}}":"{{$v}}",{{end}} };
|
|
const labels = [{{range $d.Projections}}"{{.Name}}",{{end}}];
|
|
const data = [{{range $d.Projections}}{{printf "%.2f" .MonthlyAvg}},{{end}}];
|
|
const colors = labels.map(k => catColors[k] || '#6979f8');
|
|
|
|
new Chart(document.getElementById('projChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
label: 'Monthly Avg (€)',
|
|
data,
|
|
backgroundColor: colors.map(c => c + '99'),
|
|
borderColor: colors,
|
|
borderWidth: 1.5,
|
|
borderRadius: 6,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
animation: { duration: 900, easing: 'easeOutQuart' },
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
x: { beginAtZero: true, grid: { color: gridC() }, ticks: { color: textC(), callback: v => '€' + v } },
|
|
y: { grid: { display: false }, ticks: { color: textC() } }
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{{else}}
|
|
<div class="card empty-state animate-on-scroll">
|
|
<div style="font-size:48px; margin-bottom:16px;">📊</div>
|
|
<h3>{{$d.T.Get "projections.empty.title"}}</h3>
|
|
<p>{{$d.T.Get "projections.empty.desc"}}</p>
|
|
<a href="/import" class="btn btn-primary" style="margin-top:20px;">{{$d.T.Get "projections.empty.btn_import"}}</a>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|