feat(IFK-9): interactive world map, charts, stats banner, timeline
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
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
- 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>
This commit is contained in:
@@ -1,75 +1,31 @@
|
||||
{{ $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-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; }
|
||||
}
|
||||
.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">
|
||||
@@ -86,60 +42,16 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ if eq $lang "de" }}
|
||||
<tr><td>🇦🇺 Australien</td><td>Social Media Minimum Age Act 2024</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>Social-Media-Verbot für unter 16-Jährige. Bußgelder bis 49,5 Mio. AUD.</td></tr>
|
||||
<tr><td>🇬🇧 Vereinigtes Königreich</td><td>Online Safety Act 2023</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>Umfassendes Online-Sicherheitsregime. Altersverifikation erforderlich.</td></tr>
|
||||
<tr><td>🇩🇪 Deutschland</td><td>Jugendschutzgesetz (JuSchG)</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>Auf Online-Plattformen ausgeweitet. BzKJ überwacht aktiv die Einhaltung.</td></tr>
|
||||
<tr><td>🇨🇳 China</td><td>Minderjährigenschutzgesetz</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>1 Std./Tag Gaming für Minderjährige. Echtnamen-Verifizierung verpflichtend.</td></tr>
|
||||
<tr><td>🇰🇷 Südkorea</td><td>Jugendschutzgesetz</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>Langjähriger Jugendschutzrahmen. Echtnamen-Verifizierung für Online-Dienste.</td></tr>
|
||||
<tr><td>🇮🇪 Irland</td><td>Online Safety and Media Regulation Act</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>Coimisiún na Meán reguliert Online-Sicherheit mit verbindlichen Kodizes.</td></tr>
|
||||
<tr><td>🇳🇱 Niederlande</td><td>DSA + Kinderkodex</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>Datenschutzbehörde setzt Kinderdatenschutz aktiv durch.</td></tr>
|
||||
<tr><td>🇸🇪 Schweden</td><td>DSA + Nationale Jugendrichtlinien</td><td><span class="csm-status csm-enforced">In Kraft</span></td><td>EU-DSA-Rahmen plus nationale Jugendschutzrichtlinien.</td></tr>
|
||||
<tr><td>🇫🇷 Frankreich</td><td>Loi SREN + Social-Media-Verbot</td><td><span class="csm-status csm-passed">Verabschiedet</span></td><td>Senat stimmt für Social-Media-Verbot unter 15 (April 2026). Arcom-Blacklist. Vermittlung läuft.</td></tr>
|
||||
<tr><td>🇧🇷 Brasilien</td><td>ECA Digital</td><td><span class="csm-status csm-passed">Verabschiedet</span></td><td>Lootbox-Verbot für Minderjährige. Altersgerechtes Design.</td></tr>
|
||||
<tr><td>🇮🇳 Indien</td><td>DPDP Act 2023</td><td><span class="csm-status csm-passed">Verabschiedet</span></td><td>Verifizierbare elterliche Einwilligung für unter 18-Jährige.</td></tr>
|
||||
<tr><td>🇮🇹 Italien</td><td>DSA + Einwilligungsgesetz</td><td><span class="csm-status csm-passed">Verabschiedet</span></td><td>Digitales Einwilligungsalter auf 14 festgelegt.</td></tr>
|
||||
<tr><td>🇪🇸 Spanien</td><td>Organisches Kinderschutzgesetz</td><td><span class="csm-status csm-passed">Verabschiedet</span></td><td>Umfassendes digitales Kinderschutzgesetz.</td></tr>
|
||||
<tr><td>🇳🇴 Norwegen</td><td>Social-Media-Altersgrenze</td><td><span class="csm-status csm-passed">Verabschiedet</span></td><td>Geplante Altersgrenze von 15 Jahren.</td></tr>
|
||||
<tr><td>🇺🇸 Vereinigte Staaten</td><td>KOSA + COPPA-Update</td><td><span class="csm-status csm-progress">In Bearbeitung</span></td><td>KOSA im Senat angenommen. COPPA-Update bis Apr. 2026.</td></tr>
|
||||
<tr><td>🇨🇦 Kanada</td><td>Online Harms Act (C-63)</td><td><span class="csm-status csm-progress">In Bearbeitung</span></td><td>Sorgfaltspflicht für Plattformen in Prüfung.</td></tr>
|
||||
<tr><td>🇯🇵 Japan</td><td>Regulierung der Kontaktaufnahme</td><td><span class="csm-status csm-guidelines">Richtlinien</span></td><td>Selbstregulierung der Plattformen empfohlen.</td></tr>
|
||||
{{ else if eq $lang "fr" }}
|
||||
<tr><td>🇦🇺 Australie</td><td>Social Media Minimum Age Act 2024</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Interdiction des réseaux sociaux pour les moins de 16 ans. Amendes jusqu'à 49,5 M AUD.</td></tr>
|
||||
<tr><td>🇬🇧 Royaume-Uni</td><td>Online Safety Act 2023</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Régime complet de sécurité en ligne. Vérification d'âge obligatoire.</td></tr>
|
||||
<tr><td>🇩🇪 Allemagne</td><td>Jugendschutzgesetz (JuSchG)</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Loi sur la protection de la jeunesse étendue aux plateformes en ligne. Surveillance BzKJ.</td></tr>
|
||||
<tr><td>🇨🇳 Chine</td><td>Loi sur la protection des mineurs</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>1h/jour de jeux vidéo pour les mineurs. Vérification d'identité obligatoire.</td></tr>
|
||||
<tr><td>🇰🇷 Corée du Sud</td><td>Loi sur la protection de la jeunesse</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Cadre de protection de la jeunesse établi de longue date. Vérification d'identité.</td></tr>
|
||||
<tr><td>🇮🇪 Irlande</td><td>Online Safety and Media Regulation Act</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Coimisiún na Meán régule la sécurité en ligne avec des codes contraignants.</td></tr>
|
||||
<tr><td>🇳🇱 Pays-Bas</td><td>DSA + Code de l'enfance</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Autorité de protection des données applique activement la protection des données des enfants.</td></tr>
|
||||
<tr><td>🇸🇪 Suède</td><td>DSA + Directives nationales jeunesse</td><td><span class="csm-status csm-enforced">En vigueur</span></td><td>Cadre DSA de l'UE plus directives nationales de protection de la jeunesse.</td></tr>
|
||||
<tr><td>🇫🇷 France</td><td>Loi SREN + Interdiction réseaux sociaux</td><td><span class="csm-status csm-passed">Adopté</span></td><td>Le Sénat vote l'interdiction des réseaux sociaux pour les moins de 15 ans (avril 2026). Liste noire Arcom. Conciliation en cours.</td></tr>
|
||||
<tr><td>🇧🇷 Brésil</td><td>ECA Digital</td><td><span class="csm-status csm-passed">Adopté</span></td><td>Interdiction des loot boxes pour les mineurs. Exigences de design adapté à l'âge.</td></tr>
|
||||
<tr><td>🇮🇳 Inde</td><td>DPDP Act 2023</td><td><span class="csm-status csm-passed">Adopté</span></td><td>Consentement parental vérifiable pour les moins de 18 ans.</td></tr>
|
||||
<tr><td>🇮🇹 Italie</td><td>DSA + Loi sur le consentement parental</td><td><span class="csm-status csm-passed">Adopté</span></td><td>Âge de consentement numérique fixé à 14 ans.</td></tr>
|
||||
<tr><td>🇪🇸 Espagne</td><td>Protection de l'enfance dans les environnements numériques</td><td><span class="csm-status csm-passed">Adopté</span></td><td>Loi complète de protection numérique de l'enfance.</td></tr>
|
||||
<tr><td>🇳🇴 Norvège</td><td>Limite d'âge réseaux sociaux</td><td><span class="csm-status csm-passed">Adopté</span></td><td>Limite d'âge proposée à 15 ans.</td></tr>
|
||||
<tr><td>🇺🇸 États-Unis</td><td>KOSA + Mise à jour COPPA</td><td><span class="csm-status csm-progress">En cours</span></td><td>KOSA adopté au Sénat 91-3. Mise à jour COPPA prévue avr. 2026.</td></tr>
|
||||
<tr><td>🇨🇦 Canada</td><td>Online Harms Act (C-63)</td><td><span class="csm-status csm-progress">En cours</span></td><td>Devoir de diligence proposé pour les plateformes.</td></tr>
|
||||
<tr><td>🇯🇵 Japon</td><td>Loi sur la régulation de la sollicitation des enfants</td><td><span class="csm-status csm-guidelines">Directives</span></td><td>Autorégulation des plateformes encouragée.</td></tr>
|
||||
{{ else }}
|
||||
<tr><td>🇦🇺 Australia</td><td>Social Media Minimum Age Act 2024</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>Social media ban for under-16s. Fines up to AUD 49.5M.</td></tr>
|
||||
<tr><td>🇬🇧 United Kingdom</td><td>Online Safety Act 2023</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>Comprehensive online safety regime. Age verification required.</td></tr>
|
||||
<tr><td>🇩🇪 Germany</td><td>Jugendschutzgesetz (JuSchG)</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>Youth Protection Act extended to online platforms. BzKJ monitoring.</td></tr>
|
||||
<tr><td>🇨🇳 China</td><td>Minor Protection Law</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>1hr/day gaming for minors. Real-name verification mandatory.</td></tr>
|
||||
<tr><td>🇰🇷 South Korea</td><td>Youth Protection Act</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>Long-standing youth protection framework. Real-name verification.</td></tr>
|
||||
<tr><td>🇮🇪 Ireland</td><td>Online Safety and Media Regulation Act</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>Coimisiún na Meán regulates online safety with binding codes.</td></tr>
|
||||
<tr><td>🇳🇱 Netherlands</td><td>DSA + Children's Code</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>Dutch DPA actively enforcing children's data protection.</td></tr>
|
||||
<tr><td>🇸🇪 Sweden</td><td>DSA + National Youth Guidelines</td><td><span class="csm-status csm-enforced">Enforced</span></td><td>EU DSA framework plus national youth protection guidelines.</td></tr>
|
||||
<tr><td>🇫🇷 France</td><td>Loi SREN + Social Media Ban</td><td><span class="csm-status csm-passed">Passed</span></td><td>Senate votes to ban social media for under-15s (April 2026). Arcom blacklist. Reconciliation pending.</td></tr>
|
||||
<tr><td>🇧🇷 Brazil</td><td>ECA Digital</td><td><span class="csm-status csm-passed">Passed</span></td><td>Loot box ban for minors. Age-appropriate design requirements.</td></tr>
|
||||
<tr><td>🇮🇳 India</td><td>DPDP Act 2023</td><td><span class="csm-status csm-passed">Passed</span></td><td>Verifiable parental consent for under-18s.</td></tr>
|
||||
<tr><td>🇮🇹 Italy</td><td>DSA + Parental Consent Law</td><td><span class="csm-status csm-passed">Passed</span></td><td>Digital age of consent set to 14.</td></tr>
|
||||
<tr><td>🇪🇸 Spain</td><td>Child Protection in Digital Environments</td><td><span class="csm-status csm-passed">Passed</span></td><td>Comprehensive child digital protection law.</td></tr>
|
||||
<tr><td>🇳🇴 Norway</td><td>Social Media Age Limit</td><td><span class="csm-status csm-passed">Passed</span></td><td>Proposed social media age limit of 15.</td></tr>
|
||||
<tr><td>🇺🇸 United States</td><td>KOSA + COPPA Update</td><td><span class="csm-status csm-progress">In Progress</span></td><td>KOSA passed Senate 91-3. COPPA update by Apr 2026.</td></tr>
|
||||
<tr><td>🇨🇦 Canada</td><td>Online Harms Act (C-63)</td><td><span class="csm-status csm-progress">In Progress</span></td><td>Proposed duty of care for platforms.</td></tr>
|
||||
<tr><td>🇯🇵 Japan</td><td>Act on Regulation of Soliciting Children</td><td><span class="csm-status csm-guidelines">Guidelines</span></td><td>Platform self-regulation encouraged.</td></tr>
|
||||
{{ 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>
|
||||
|
||||
Reference in New Issue
Block a user