Files
internetforkids/layouts/shortcodes/child-safety-map.html
Christian Gick 308034e40d
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 9s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 4s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s
feat(IFK-9): interactive world map, charts, stats banner, timeline
- Add centralized data/countries.json with all 17 countries (EN/DE/FR)
- Add Leaflet choropleth world map with TopoJSON boundaries
- Add stats banner shortcode (enforced/passed/progress/guidelines counts)
- Add Chart.js charts (status donut, age limits bar, legislation timeline)
- Add Mermaid timeline of legislation milestones 2020-2026
- Refactor child-safety-map table to use data file (DRY)
- Update all 3 language articles (EN/DE/FR)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 12:03:02 +03:00

66 lines
3.9 KiB
HTML

{{ $lang := .Page.Language.Lang }}
{{ $countries := hugo.Data.countries }}
{{ $statusClass := dict "enforced" "csm-enforced" "passed" "csm-passed" "progress" "csm-progress" "guidelines" "csm-guidelines" }}
{{ $statusLabel := dict
"enforced" (dict "en" "Enforced" "de" "In Kraft" "fr" "En vigueur")
"passed" (dict "en" "Passed" "de" "Verabschiedet" "fr" "Adopté")
"progress" (dict "en" "In Progress" "de" "In Bearbeitung" "fr" "En cours")
"guidelines" (dict "en" "Guidelines" "de" "Richtlinien" "fr" "Directives")
}}
<style>
.csm-container { max-width: 100%; margin: 2rem 0; }
.csm-container h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
.csm-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
.csm-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.csm-table th { background: #1e40af; color: white; padding: 0.75rem 1rem; text-align: left; font-weight: 600; }
.csm-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.csm-table tr:hover { background: #f0fdf4; }
.csm-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.csm-enforced { background: #1e40af; color: white; }
.csm-passed { background: #3b82f6; color: white; }
.csm-progress { background: #93c5fd; color: #1e3a5f; }
.csm-guidelines { background: #dbeafe; color: #1e3a5f; }
.csm-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; font-size: 0.8rem; }
.csm-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.csm-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
@media (max-width: 640px) { .csm-table { font-size: 0.85rem; } .csm-table th, .csm-table td { padding: 0.5rem; } }
</style>
<div class="csm-container">
<h3>{{ if eq $lang "de" }}Kinderschutzgesetze weltweit{{ else if eq $lang "fr" }}Lois de protection de l'enfance dans le monde{{ else }}Child Protection Laws Worldwide{{ end }}</h3>
<p class="csm-subtitle">{{ if eq $lang "de" }}Stand: 2026{{ else if eq $lang "fr" }}Situation en 2026{{ else }}As of 2026{{ end }}</p>
<table class="csm-table">
<thead>
<tr>
<th>{{ if eq $lang "de" }}Land{{ else if eq $lang "fr" }}Pays{{ else }}Country{{ end }}</th>
<th>{{ if eq $lang "de" }}Gesetz{{ else if eq $lang "fr" }}Loi{{ else }}Law{{ end }}</th>
<th>Status</th>
<th>{{ if eq $lang "de" }}Details{{ else if eq $lang "fr" }}Détails{{ else }}Details{{ end }}</th>
</tr>
</thead>
<tbody>
{{ range $countries }}
{{ $loc := index . $lang | default (index . "en") }}
{{ $cls := index $statusClass .status }}
{{ $lbl := index (index $statusLabel .status) $lang | default (index (index $statusLabel .status) "en") }}
<tr>
<td>{{ .flag }} {{ $loc.name }}</td>
<td>{{ $loc.law }}</td>
<td><span class="csm-status {{ $cls }}">{{ $lbl }}</span></td>
<td>{{ $loc.detail }}</td>
</tr>
{{ end }}
</tbody>
</table>
<div class="csm-legend">
<div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#1e40af"></div>{{ if eq $lang "de" }}Gesetz in Kraft{{ else if eq $lang "fr" }}Loi en vigueur{{ else }}Law Enforced{{ end }}</div>
<div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#3b82f6"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
<div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#93c5fd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
<div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#dbeafe"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
</div>
</div>