// Public pages: Home, CategoryIndex, Category, Detail, Ranking // === HOME === const HomePage = ({ navigate, search, setSearch, points, bumpPoints, collection, toggleCollect, user }) => { const fresh = [...COLORINGS].filter(c => c.isNew).slice(0, 4); const popular = [...COLORINGS].sort((a,b) => b.points - a.points).slice(0, 8); const categories = getPublicCategories(); const topCats = categories.slice(0, 6); return (
{/* Hero */}
{/* Floating decorations */}
Über 1.500 kostenlose Malvorlagen

Mal los! ✏️ Ganz viele{" "} bunte {" "} Bilder zum Ausdrucken.

Entdecke liebevoll gestaltete Malvorlagen für Kinder, Kita, Schule und kreative Pausen. Einfach klicken, drucken, los malen.

navigate({ view: 'categoryIndex' })}/>
Beliebt: {['Einhorn','Dinosaurier','Mandala','Weihnachten','Bauernhof'].map(t => ( ))}
{/* CTA-Banner: Sammelmappe (jetzt direkt unter dem Hero) */}
Sammelmappe

Mehrere Bilder auf einmal drucken? Klar!

Sammle deine Lieblingsbilder in der Sammelmappe und drucke sie alle gemeinsam, perfekt für Kita, Klasse oder den Kindergeburtstag.

navigate({ view: 'categoryIndex' })} trailing={}>Bilder entdecken
{/* Hinteres Blatt (links) */}
Rakete
{/* Hinteres Blatt (rechts) */}
Osterhase
{/* Vorderes Blatt (Mitte) */}
Mandala
{/* Badge: mehrere Seiten, ein Druck */}
3 Seiten, 1 Druck
{/* Beliebte Kategorien (chips) */}
} onClick={() => navigate({ view: 'categoryIndex' })}>Alle Kategorien}/>
{categories.map(c => )}
{/* Neue Ausmalbilder */}
} onClick={() => navigate({ view: 'categoryIndex' })}>Alle ansehen}/>
{fresh.map(c => )}
{/* Beliebteste diesen Monat */}
} onClick={() => navigate({ view: 'ranking' })}>Zur Top-Liste}/>
{popular.slice(0,4).map((c, i) => ( Top {i+1}} /> ))}
{popular.slice(4,8).map(c => )}
{/* Top Kategorien */}
{topCats.map(c => )}
{/* AdSense slot, inline */}
{/* CTA banner removed, moved above (under hero) */} {/* SEO text */}

Kostenlose Ausmalbilder zum Ausdrucken

Auf Malfino.de findest du eine wachsende Sammlung kostenloser Malvorlagen für Kinder, Eltern, Erzieherinnen und Lehrer. Alle Ausmalbilder sind frei zur privaten Nutzung, einfach das gewünschte Motiv auswählen, als PDF herunterladen oder direkt drucken. Ob niedliche Tiere, magische Einhörner, spannende Dinosaurier oder beruhigende Mandalas: Hier ist für jede kreative Pause das passende Bild dabei. Jedes heruntergeladene oder ausgedruckte Motiv sammelt Punkte, so siehst du sofort, welche Ausmalbilder gerade besonders beliebt sind.

); }; const HeroCollage = ({ navigate }) => { const today = useTodayStats(); const todayCount = (today.downloads || 0) + (today.prints || 0); return (
{todayCount === 0 ? 'Heute schon los?' : `${todayCount.toLocaleString('de-DE')} Download${todayCount === 1 ? '' : 's'} heute`}
Top diesen Monat
); }; // === CATEGORY INDEX === const CategoryIndexPage = ({ navigate, search, setSearch }) => { const filtered = getPublicCategories().filter(c => c.name.toLowerCase().includes(search.toLowerCase())); return (

Alle Kategorien

Wähle ein Lieblingsthema und entdecke unsere Sammlung kostenloser Ausmalbilder zum Ausdrucken.

{filtered.map(c => )}
); }; // === CATEGORY === const CategoryPage = ({ slug, navigate, collection, toggleCollect, user }) => { const cat = findCategory(slug) || { name: 'Kategorie', slug: slug || '', tone: 'mint', art: 'mandala', count: 0 }; const tone = TONE_CLASSES[cat.tone] || TONE_CLASSES.mint; // Only the images that actually belong to this category. const items = coloringsByCategory(cat.slug); const [filter, setFilter] = React.useState('beliebt'); const [shown, setShown] = React.useState(8); const sorted = React.useMemo(() => { const arr = [...items]; if (filter === 'beliebt') arr.sort((a,b) => b.points - a.points); if (filter === 'neu') arr.sort((a,b) => (b.isNew?1:0) - (a.isNew?1:0)); if (filter === 'einfach') return arr.filter(x => x.difficulty === 'Einfach'); if (filter === 'detail') return arr.filter(x => x.difficulty === 'Detailreich'); return arr; }, [filter, slug]); return (
{cat.count} Ausmalbilder

Ausmalbilder {cat.name}

Ob für die Kita, die Schule oder den Regennachmittag zuhause, entdecke unsere liebevoll gestalteten {cat.name}-Malvorlagen. Alle Bilder kannst du kostenlos herunterladen oder direkt ausdrucken.

Beliebt diesen Monat
{sorted.slice(0, shown).map(c => )}
{/* AdSense, inline between grid and pagination */}
{shown < sorted.length && (
setShown(s => s + 8)} trailing={}> Mehr laden
{shown} von {sorted.length} angezeigt
)}
); }; // === DETAIL === const DetailPage = ({ slug, navigate, points, bumpPoints, collection, toggleCollect, user }) => { const realItem = findColoring(slug); const item = realItem || { id: 0, category: '', title: 'Nicht gefunden', tags: [], downloads: 0, prints: 0, points: 0, art: 'mandala', previewUrl: '', difficulty: 'Einfach' }; const cat = findCategory(item.category) || { name: '', slug: '', tone: 'mint' }; const tone = TONE_CLASSES[cat.tone] || TONE_CLASSES.mint; const [bursts, setBursts] = React.useState([]); const [stats, setStats] = React.useState({ downloads: item.downloads, prints: item.prints, points: item.points }); const bump = (kind) => { const inc = kind === 'download' ? 2 : 3; // Persist to the shared data object so lists/ranking reflect the new count. if (kind === 'download') item.downloads += 1; if (kind === 'print') item.prints += 1; item.points += inc; setStats({ downloads: item.downloads, prints: item.prints, points: item.points }); const id = Math.random(); setBursts(b => [...b, { id, value: `+${inc}`, kind }]); setTimeout(() => setBursts(b => b.filter(x => x.id !== id)), 1100); bumpPoints && bumpPoints(inc); // Actually trigger the action if (kind === 'download') downloadColoring(item); if (kind === 'print') printColoring(item); }; const similar = COLORINGS.filter(c => c.category === item.category && c.id !== item.id).slice(0,4); const fillers = COLORINGS.filter(c => c.id !== item.id).slice(0, 4 - similar.length); const related = [...similar, ...fillers].slice(0,4); if (!realItem) { return (
🔍

Ausmalbild nicht gefunden

Dieses Bild gibt es (noch) nicht.

navigate({ view: 'home' })}>Zur Startseite
); } return (
{/* Preview */}
{item.previewUrl ? {item.title} : } {item.isNew && ( NEU )}
A4 · PDF · 300 dpi · {item.difficulty} · Kostenlos für private Nutzung
{/* Sidebar */}
{cat.name}

{item.title}

Ein zauberhaftes Motiv mit klaren Linien und vielen Flächen zum Ausmalen, perfekt für Kinder ab 4 Jahren. Geeignet für Buntstifte, Filzstifte oder Wasserfarben.

{item.tags.map(t => ( {t} ))}
} className="w-full" onClick={() => bump('download')}>Herunterladen {bursts.filter(b => b.kind === 'download').map(b => ( ⭐ {b.value} ))}
} className="w-full" onClick={() => bump('print')}>Drucken {bursts.filter(b => b.kind === 'print').map(b => ( ⭐ {b.value} ))}
{toggleCollect && (() => { const inMappe = collection && collection.some(x => x.id === item.id); return ( ); })()}
Kostenlos für private Nutzung. Druck und Einsatz in Kita, Schule und zuhause sind erlaubt.
{/* AdSense, sidebar */}
{/* Similar */}
{related.map(c => )}
window.dispatchEvent(new CustomEvent('aw:open-auth'))}/>
); }; const StatPill = ({ icon, label, value, tone = 'sky' }) => { const t = TONE_CLASSES[tone]; return (
{icon} {label}
{value}
); }; // === RANKING === const RankingPage = ({ navigate, collection, toggleCollect, user }) => { const [period, setPeriod] = React.useState('monat'); const [view, setView] = React.useState('bilder'); // 'bilder' | 'kategorien' const [catFilter, setCatFilter] = React.useState('alle'); const [diffFilter, setDiffFilter] = React.useState('alle'); const seedShift = { heute: 0, woche: 1, monat: 2, jahr: 3, letztesJahr: 4, gesamt: 5 }[period] || 0; // Re-derive ranking based on period (mock: rotate + scale points) const list = React.useMemo(() => { const arr = [...COLORINGS].map((c, i) => ({ ...c, points: Math.max(40, Math.round(c.points * (period==='heute'?0.04:period==='woche'?0.22:period==='monat'?1:period==='jahr'?6:period==='letztesJahr'?5:14) - (i+seedShift)*7)) })).sort((a,b)=>b.points-a.points).map((c, idx) => ({...c, rank: idx+1})); return arr; }, [period]); // Apply filters (only used in 'bilder' view) const filtered = React.useMemo(() => { let arr = list; if (catFilter !== 'alle') arr = arr.filter(c => c.category === catFilter); if (diffFilter !== 'alle') arr = arr.filter(c => c.difficulty === diffFilter); return arr.map((c, idx) => ({ ...c, rank: idx + 1 })); }, [list, catFilter, diffFilter]); // Aggregate per-category points for the "Top Kategorien" view const categoryRanking = React.useMemo(() => { const totals = {}; list.forEach(c => { totals[c.category] = (totals[c.category] || 0) + c.points; }); return CATEGORIES.map(cat => { const items = list.filter(c => c.category === cat.slug); const top = items[0]; return { ...cat, points: totals[cat.slug] || 0, items: items.length, top, }; }).sort((a, b) => b.points - a.points).map((c, idx) => ({ ...c, rank: idx + 1 })); }, [list]); return (
Charts

Beliebteste Ausmalbilder

Punkte sammeln Bilder durch Downloads und Druckvorgänge. So siehst du sofort, was gerade angesagt ist.

{/* Time tabs */}
{/* Bilder/Kategorien switch */}
{[ {l:'🏆 Top Bilder', v:'bilder'}, {l:'🏷️ Top Kategorien', v:'kategorien'}, ].map(t => ( ))}
{view === 'bilder' && (
Filter: ({value:c.slug, label:c.name}))]}/> {(catFilter !== 'alle' || diffFilter !== 'alle') && ( )}
)}
{/* AdSense, leaderboard above ranking content */}
{/* === Top Bilder === */} {view === 'bilder' && ( <> {filtered.length === 0 ? (
🤔
Keine Bilder gefunden
Versuche andere Filter.
) : ( <>
{filtered.slice(0,3).map((c, i) => ( ))}
{filtered.length > 3 && (
{filtered.slice(3).map((c, idx) => ( ))}
)} )} )} {/* === Top Kategorien === */} {view === 'kategorien' && (
{categoryRanking.map((c, idx) => { const tone = TONE_CLASSES[c.tone]; return ( ); })}
)}
); }; const FilterSelect = ({ value, onChange, options }) => (
); const PodiumCard = ({ item, place, navigate }) => { const cat = findCategory(item.category); const tone = TONE_CLASSES[cat.tone]; const podiumTone = place === 1 ? 'bg-sun' : place === 2 ? 'bg-sky' : 'bg-coral'; const lift = place === 1 ? '-translate-y-3' : place === 2 ? 'translate-y-1' : 'translate-y-3'; return ( ); }; const RankRow = ({ item, navigate, divider }) => { const cat = findCategory(item.category); const tone = TONE_CLASSES[cat.tone]; return ( ); }; // === Breadcrumbs (used by several pages) === const Crumbs = ({ items, navigate }) => ( ); Object.assign(window, { HomePage, CategoryIndexPage, CategoryPage, DetailPage, RankingPage, Crumbs, });