christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stack stats vertically: chart on top, 3 stat cards in a row below
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 14s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 2s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-06 07:23:40 +03:00
parent c5817cada5
commit a81e42c8e4
1 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
layouts/shortcodes/addiction-stats.html
View File

@@ -3,57 +3,51 @@
<style> <style>
.addiction-stats { margin: 2.5rem 0; } .addiction-stats { margin: 2.5rem 0; }
.addiction-stats-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
.addiction-chart-card { .addiction-chart-card {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 1.5rem; text-align: center; padding: 1.5rem; text-align: center; margin-bottom: 1.5rem;
} }
.addiction-chart-card h4 { .addiction-chart-card h4 {
margin: 0 0 1rem; font-size: 0.9rem; color: #334155; margin: 0 0 1rem; font-size: 0.9rem; color: #334155;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} }
.addiction-impact-cards { .addiction-impact-cards {
display: grid; grid-template-columns: 1fr; gap: 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
} }
.addiction-impact-card { .addiction-impact-card {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 1.25rem; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; text-align: center;
} }
.addiction-impact-num { .addiction-impact-num {
font-size: 1.8rem; font-weight: 800; line-height: 1; font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 0.5rem;
min-width: 3.5rem; text-align: center;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} }
.addiction-impact-desc { .addiction-impact-desc {
font-size: 0.85rem; color: #475569; line-height: 1.35; font-size: 0.8rem; color: #475569; line-height: 1.35;
font-family: system-ui, sans-serif; text-align: left; font-family: system-ui, sans-serif;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.addiction-stats-grid { grid-template-columns: 1fr; } .addiction-impact-cards { grid-template-columns: 1fr; }
} }
</style> </style>
<div class="addiction-stats"> <div class="addiction-stats">
<div class="addiction-stats-grid"> <div class="addiction-chart-card">
<div class="addiction-chart-card"> <h4>{{ if eq $lang "de" }}Jugendliche & Social Media{{ else if eq $lang "fr" }}Adolescents & réseaux sociaux{{ else }}Teens & Social Media{{ end }}</h4>
<h4>{{ if eq $lang "de" }}Jugendliche & Social Media{{ else if eq $lang "fr" }}Adolescents & réseaux sociaux{{ else }}Teens & Social Media{{ end }}</h4> <canvas id="addiction-usage-chart"></canvas>
<canvas id="addiction-usage-chart"></canvas> </div>
<div class="addiction-impact-cards">
<div class="addiction-impact-card">
<div class="addiction-impact-num" style="color:#667eea">5h</div>
<div class="addiction-impact-desc">{{ if eq $lang "de" }}Durchschnittliche tägliche Nutzung{{ else if eq $lang "fr" }}Utilisation quotidienne moyenne{{ else }}Average daily use{{ end }}</div>
</div> </div>
<div class="addiction-impact-cards"> <div class="addiction-impact-card">
<div class="addiction-impact-card"> <div class="addiction-impact-num" style="color:#ef4444">2-3x</div>
<div class="addiction-impact-num" style="color:#667eea">5h</div> <div class="addiction-impact-desc">{{ if eq $lang "de" }}Suizidgedanken-Risiko bei Abhängigkeit{{ else if eq $lang "fr" }}Risque d'idéation suicidaire{{ else }}Suicidal ideation risk with addiction{{ end }}</div>
<div class="addiction-impact-desc">{{ if eq $lang "de" }}Durchschnittliche tägliche Social-Media-Nutzung bei Jugendlichen{{ else if eq $lang "fr" }}Temps moyen quotidien sur les réseaux sociaux chez les adolescents{{ else }}Average daily social media use among teenagers{{ end }}</div> </div>
</div> <div class="addiction-impact-card">
<div class="addiction-impact-card"> <div class="addiction-impact-num" style="color:#764ba2">3h+</div>
<div class="addiction-impact-num" style="color:#ef4444">2-3x</div> <div class="addiction-impact-desc">{{ if eq $lang "de" }}Schwelle für erhöhte Angst & Depression{{ else if eq $lang "fr" }}Seuil d'anxiété & dépression accrues{{ else }}Threshold for increased anxiety & depression{{ end }}</div>
<div class="addiction-impact-desc">{{ if eq $lang "de" }}Höheres Risiko für Suizidgedanken bei Social-Media-Abhängigkeit (Weill Cornell Medicine){{ else if eq $lang "fr" }}Risque accru d'idéation suicidaire en cas de dépendance aux réseaux sociaux (Weill Cornell Medicine){{ else }}Higher risk of suicidal ideation with social media addiction (Weill Cornell Medicine){{ end }}</div>
</div>
<div class="addiction-impact-card">
<div class="addiction-impact-num" style="color:#764ba2">3h+</div>
<div class="addiction-impact-desc">{{ if eq $lang "de" }}Tägliche Nutzung ab der Angst und Depression deutlich zunehmen (JAMA Psychiatry){{ else if eq $lang "fr" }}D'utilisation quotidienne au-delà desquelles anxiété et dépression augmentent significativement (JAMA Psychiatry){{ else }}Daily use threshold where anxiety and depression increase significantly (JAMA Psychiatry){{ end }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>