6a4e8dde05
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 14s
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 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s
WebKit tiles large SVG elements for GPU rendering. Anti-aliasing at tile boundaries creates different sub-pixel values on each side. crispEdges disables anti-aliasing so both sides render identically. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
246 lines
13 KiB
HTML
246 lines
13 KiB
HTML
{{ $lang := .Page.Language.Lang }}
|
|
{{ $countries := hugo.Data.countries }}
|
|
|
|
<style>
|
|
.ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
|
|
.ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
|
|
.ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
|
|
.ifk-map-container { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #c8d3df; }
|
|
.ifk-map-svg { width: 100%; height: 100%; display: block; cursor: grab; shape-rendering: crispEdges; }
|
|
.ifk-map-svg:active { cursor: grabbing; }
|
|
.ifk-map-svg .country { stroke: #94a3b8; stroke-width: 0.3; transition: stroke-width 0.15s; }
|
|
.ifk-map-svg .country.has-data:hover { stroke: #667eea; stroke-width: 1.2; cursor: pointer; }
|
|
.ifk-map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 10; }
|
|
.ifk-map-controls button { width: 30px; height: 30px; background: #fff; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; }
|
|
.ifk-map-controls button:hover { background: #f0f0f0; }
|
|
.ifk-map-popup { position: absolute; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); padding: 0.75rem; font-size: 0.85rem; max-width: 280px; line-height: 1.4; z-index: 20; pointer-events: auto; display: none; }
|
|
.ifk-map-popup .popup-close { position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: 16px; cursor: pointer; color: #999; }
|
|
.ifk-popup-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; margin: 0.3rem 0; }
|
|
.ifk-popup-age { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; font-size: 0.8rem; color: #555; }
|
|
.ifk-popup-detail { margin: 0.4rem 0; font-size: 0.82rem; color: #444; }
|
|
.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
|
|
.ifk-popup-link:hover { text-decoration: underline; }
|
|
.ifk-map-legend {
|
|
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
|
|
margin-top: 1rem; font-size: 0.8rem;
|
|
}
|
|
.ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
|
|
.ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
|
|
@media (max-width: 640px) { .ifk-map-container { height: 280px; } }
|
|
</style>
|
|
|
|
<div class="ifk-map-wrap">
|
|
<h3>{{ if eq $lang "de" }}Interaktive Weltkarte: Kinderschutzgesetze{{ else if eq $lang "fr" }}Carte interactive : lois de protection de l'enfance{{ else }}Interactive Map: Child Protection Laws{{ end }}</h3>
|
|
<p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p>
|
|
<div class="ifk-map-container" id="ifk-map-container">
|
|
<svg class="ifk-map-svg" id="ifk-map-svg" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"></svg>
|
|
<div class="ifk-map-controls">
|
|
<button id="ifk-zoom-in" title="Zoom in">+</button>
|
|
<button id="ifk-zoom-out" title="Zoom out">−</button>
|
|
<button id="ifk-zoom-reset" title="Reset"><svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 9H0v5h5v-2H2V9zm0-4h3V3H2V0H0v5zm10 7H9v2h5V9h-2v3zM9 0v2h3v3h2V0H9z" fill="currentColor"/></svg></button>
|
|
</div>
|
|
<div class="ifk-map-popup" id="ifk-map-popup"><button class="popup-close" id="ifk-popup-close">×</button><div id="ifk-popup-content"></div></div>
|
|
</div>
|
|
<div class="ifk-map-legend">
|
|
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#667eea"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
|
|
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#764ba2"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
|
|
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a5b4fc"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
|
|
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e0e7ff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
|
|
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
|
|
<script>
|
|
(function() {
|
|
var LANG = "{{ $lang }}";
|
|
var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
|
|
var STATUS_LABELS = {
|
|
en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
|
|
de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
|
|
fr: { enforced: 'En vigueur', passed: 'Adopté', progress: 'En cours', guidelines: 'Directives' }
|
|
};
|
|
var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: '\u00c2ge min. r\u00e9seaux sociaux' };
|
|
var ARTICLE_ANCHORS = { AUS: 'australia', DEU: 'germany', USA: 'the-united-states', FRA: 'france', BRA: 'brazil' };
|
|
if (LANG === 'de') { ARTICLE_ANCHORS.AUS = 'australien'; ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten'; ARTICLE_ANCHORS.DEU = 'deutschland'; ARTICLE_ANCHORS.BRA = 'brasilien'; }
|
|
|
|
var countries = {{ $countries | jsonify | safeJS }};
|
|
var byIsoNum = {};
|
|
countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
|
|
|
|
// Map dimensions (Equirectangular projection)
|
|
var W = 960, H = 480;
|
|
var svg = document.getElementById('ifk-map-svg');
|
|
var container = document.getElementById('ifk-map-container');
|
|
var popup = document.getElementById('ifk-map-popup');
|
|
var popupContent = document.getElementById('ifk-popup-content');
|
|
|
|
// ViewBox state
|
|
var vb = { x: 0, y: 0, w: W, h: H };
|
|
var VB_INIT = { x: 0, y: 0, w: W, h: H };
|
|
var MIN_W = W / 16; // max zoom in
|
|
|
|
function setViewBox() {
|
|
svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h);
|
|
}
|
|
|
|
// Equirectangular projection
|
|
function projectCoord(lon, lat) {
|
|
return [(lon + 180) * (W / 360), (90 - lat) * (H / 180)];
|
|
}
|
|
|
|
function projectRing(ring) {
|
|
var d = '';
|
|
for (var i = 0; i < ring.length; i++) {
|
|
var p = projectCoord(ring[i][0], ring[i][1]);
|
|
d += (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1);
|
|
}
|
|
return d + 'Z';
|
|
}
|
|
|
|
function projectGeometry(geom) {
|
|
var d = '';
|
|
if (geom.type === 'Polygon') {
|
|
geom.coordinates.forEach(function(ring) { d += projectRing(ring); });
|
|
} else if (geom.type === 'MultiPolygon') {
|
|
geom.coordinates.forEach(function(poly) {
|
|
poly.forEach(function(ring) { d += projectRing(ring); });
|
|
});
|
|
}
|
|
return d;
|
|
}
|
|
|
|
// Build SVG
|
|
fetch('{{ "data/countries-50m.json" | relURL }}')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(topo) {
|
|
var geo = topojson.feature(topo, topo.objects.countries);
|
|
var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
|
|
|
|
// Country fills (ocean is CSS background on container)
|
|
geo.features.forEach(function(f) {
|
|
var id = String(f.id).padStart(3, '0');
|
|
var c = byIsoNum[id];
|
|
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
var d = projectGeometry(f.geometry);
|
|
if (!d) return;
|
|
path.setAttribute('d', d);
|
|
path.setAttribute('fill', c ? STATUS_COLORS[c.status] : '#ffffff');
|
|
path.setAttribute('fill-opacity', c ? '0.65' : '1');
|
|
path.setAttribute('class', 'country' + (c ? ' has-data' : ''));
|
|
path.setAttribute('data-iso', id);
|
|
svg.appendChild(path);
|
|
});
|
|
|
|
// Borders (shared edges only)
|
|
var bordersD = projectGeometry(borders);
|
|
if (bordersD) {
|
|
var borderPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
borderPath.setAttribute('d', bordersD);
|
|
borderPath.setAttribute('fill', 'none');
|
|
borderPath.setAttribute('stroke', '#94a3b8');
|
|
borderPath.setAttribute('stroke-width', '0.3');
|
|
borderPath.setAttribute('pointer-events', 'none');
|
|
svg.appendChild(borderPath);
|
|
}
|
|
|
|
setViewBox();
|
|
|
|
// Click handler
|
|
svg.addEventListener('click', function(e) {
|
|
var target = e.target;
|
|
if (!target.classList.contains('has-data')) { popup.style.display = 'none'; return; }
|
|
var id = target.getAttribute('data-iso');
|
|
var c = byIsoNum[id];
|
|
if (!c) return;
|
|
|
|
var loc = c[LANG] || c.en;
|
|
var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
|
|
var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
|
|
var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
|
|
'<em>' + loc.law + '</em><br>' +
|
|
'<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
|
|
'<div class="ifk-popup-age">\u{1F464} ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
|
|
'<div class="ifk-popup-detail">' + loc.detail + '</div>';
|
|
var anchor = ARTICLE_ANCHORS[c.iso3];
|
|
if (anchor) {
|
|
var readMore = { en: 'Read more \u2193', de: 'Weiterlesen \u2193', fr: 'En savoir plus \u2193' };
|
|
html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
|
|
}
|
|
popupContent.innerHTML = html;
|
|
|
|
// Position popup near click
|
|
var rect = container.getBoundingClientRect();
|
|
var px = e.clientX - rect.left;
|
|
var py = e.clientY - rect.top;
|
|
// Keep popup within container
|
|
popup.style.display = 'block';
|
|
var pw = popup.offsetWidth;
|
|
var ph = popup.offsetHeight;
|
|
var left = Math.min(px + 10, rect.width - pw - 10);
|
|
var top = Math.max(py - ph - 10, 10);
|
|
if (top < 10) top = py + 10;
|
|
popup.style.left = left + 'px';
|
|
popup.style.top = top + 'px';
|
|
});
|
|
|
|
// Close popup
|
|
document.getElementById('ifk-popup-close').addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
popup.style.display = 'none';
|
|
});
|
|
|
|
// Zoom controls
|
|
function zoomBy(factor) {
|
|
var cx = vb.x + vb.w / 2;
|
|
var cy = vb.y + vb.h / 2;
|
|
var nw = Math.max(MIN_W, Math.min(VB_INIT.w, vb.w * factor));
|
|
var nh = nw * (H / W);
|
|
vb.w = nw; vb.h = nh;
|
|
vb.x = Math.max(0, Math.min(W - vb.w, cx - vb.w / 2));
|
|
vb.y = Math.max(0, Math.min(H - vb.h, cy - vb.h / 2));
|
|
setViewBox();
|
|
}
|
|
|
|
document.getElementById('ifk-zoom-in').addEventListener('click', function() { zoomBy(0.5); });
|
|
document.getElementById('ifk-zoom-out').addEventListener('click', function() { zoomBy(2); });
|
|
document.getElementById('ifk-zoom-reset').addEventListener('click', function() {
|
|
vb.x = VB_INIT.x; vb.y = VB_INIT.y; vb.w = VB_INIT.w; vb.h = VB_INIT.h;
|
|
setViewBox();
|
|
});
|
|
|
|
// Pan via drag
|
|
var dragging = false, dragStart = null;
|
|
svg.addEventListener('mousedown', function(e) {
|
|
if (e.target.closest('.ifk-map-controls') || e.target.closest('.ifk-map-popup')) return;
|
|
dragging = true;
|
|
dragStart = { x: e.clientX, y: e.clientY, vbx: vb.x, vby: vb.y };
|
|
e.preventDefault();
|
|
});
|
|
window.addEventListener('mousemove', function(e) {
|
|
if (!dragging) return;
|
|
var scale = vb.w / svg.clientWidth;
|
|
vb.x = Math.max(0, Math.min(W - vb.w, dragStart.vbx - (e.clientX - dragStart.x) * scale));
|
|
vb.y = Math.max(0, Math.min(H - vb.h, dragStart.vby - (e.clientY - dragStart.y) * scale));
|
|
setViewBox();
|
|
});
|
|
window.addEventListener('mouseup', function() { dragging = false; });
|
|
|
|
// Touch support
|
|
svg.addEventListener('touchstart', function(e) {
|
|
if (e.touches.length !== 1) return;
|
|
dragging = true;
|
|
dragStart = { x: e.touches[0].clientX, y: e.touches[0].clientY, vbx: vb.x, vby: vb.y };
|
|
}, { passive: true });
|
|
svg.addEventListener('touchmove', function(e) {
|
|
if (!dragging || e.touches.length !== 1) return;
|
|
var scale = vb.w / svg.clientWidth;
|
|
vb.x = Math.max(0, Math.min(W - vb.w, dragStart.vbx - (e.touches[0].clientX - dragStart.x) * scale));
|
|
vb.y = Math.max(0, Math.min(H - vb.h, dragStart.vby - (e.touches[0].clientY - dragStart.y) * scale));
|
|
setViewBox();
|
|
}, { passive: true });
|
|
svg.addEventListener('touchend', function() { dragging = false; }, { passive: true });
|
|
});
|
|
})();
|
|
</script>
|