Willkommen in Antons Unterwasserwelt!
Rubbeln, ausmalen, mitsingen – schnapp dir was aus dem Riff und schau, was du heute findest!
Was probierst du heute?
Jeden Tag gibt's was Neues zu entdecken – schau ruhig öfter vorbei!
Ausmalbilder
Anton-Motive zum Ausdrucken – ein paar Stück zur Auswahl.
Kommt baldAntons Lied
Ein kleines Lied zum Mitsingen – mit Ein/Aus-Schalter.
Kommt baldBereit für den ersten Sprung? 🌊
Vom Babyschwimmen bis zum Seepferdchen – findet den passenden Kurs für euer Kind.
Jetzt Kurs finden →' + '
' + '
' + '
'; } else { reveal.innerHTML = '
' + '
'; } if (skipCanvas) { canvas.style.display = 'none'; hint.style.display = 'none'; } } function setupCanvas() { function resize() { var rect = card.getBoundingClientRect(); var w = rect.width || card.offsetWidth || 260; var h = rect.height || card.offsetHeight || Math.round(w * 0.75); canvas.width = w; canvas.height = h; paintFoil(); } function paintFoil() { var w = canvas.width, h = canvas.height; var grad = ctx.createLinearGradient(0, 0, w, h); grad.addColorStop(0, '#BFD9E8'); grad.addColorStop(1, '#8FB6CC'); ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h); ctx.fillStyle = 'rgba(255,255,255,.10)'; for (var i = 0; i < 18; i++) { var rx = Math.random() * w, ry = Math.random() * h, rr = 5 + Math.random() * 12; ctx.beginPath(); ctx.arc(rx, ry, rr, 0, Math.PI * 2); ctx.fill(); } ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = "bold 20px 'Fredoka One', cursive"; ctx.fillStyle = 'rgba(15,58,82,.55)'; ctx.fillText('🐚', w / 2, h / 2); } resize(); window.addEventListener('resize', resize); window.addEventListener('load', resize); requestAnimationFrame(function () { requestAnimationFrame(resize); }); var isDown = false; var revealed = false; var lastPos = null; var tool = document.getElementById('lsTool'); function getPos(e) { var rect = canvas.getBoundingClientRect(); var x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left; var y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top; return { x: x, y: y }; } function stampShell(x, y, angle) { ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.globalCompositeOperation = 'destination-out'; ctx.font = "32px sans-serif"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('🐚', 0, 0); ctx.restore(); } function scratchAt(x, y) { var angle = 0; if (lastPos) { angle = Math.atan2(y - lastPos.y, x - lastPos.x); var dist = Math.hypot(x - lastPos.x, y - lastPos.y); var steps = Math.max(1, Math.floor(dist / 9)); for (var i = 1; i <= steps; i++) { var ix = lastPos.x + (x - lastPos.x) * (i / steps); var iy = lastPos.y + (y - lastPos.y) * (i / steps); stampShell(ix, iy, angle); } } else { stampShell(x, y, angle); } lastPos = { x: x, y: y }; tool.style.display = 'block'; tool.style.left = x + 'px'; tool.style.top = y + 'px'; tool.style.transform = 'translate(-50%, -50%) rotate(' + (angle + Math.PI / 4) + 'rad)'; } function checkProgress() { if (revealed) return; var w = canvas.width, h = canvas.height; var sampleStep = 6; var total = 0, cleared = 0; var data = ctx.getImageData(0, 0, w, h).data; for (var y = 0; y < h; y += sampleStep) { for (var x = 0; x < w; x += sampleStep) { var idx = (y * w + x) * 4 + 3; total++; if (data[idx] < 40) cleared++; } } if (total > 0 && cleared / total > 0.55) finishReveal(); } function finishReveal() { revealed = true; canvas.style.opacity = '0'; hint.style.opacity = '0'; tool.style.display = 'none'; setTimeout(function () { canvas.style.display = 'none'; hint.style.display = 'none'; }, 500); if (win) cta.hidden = false; status.textContent = win ? 'Glückwunsch! Code eurem Team zeigen oder online eingeben.' : 'Danke fürs Mitmachen – morgen gibt es eine neue Muschel! 🐚'; try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ date: today, win: win, msg: chosenMsg })); } catch (e) {} } function onMove(e) { if (!isDown || revealed) return; var p = getPos(e); scratchAt(p.x, p.y); checkProgress(); e.preventDefault(); } canvas.addEventListener('pointerdown', function (e) { isDown = true; lastPos = null; onMove(e); }); canvas.addEventListener('pointermove', onMove); window.addEventListener('pointerup', function () { isDown = false; lastPos = null; tool.style.display = 'none'; }); canvas.addEventListener('touchstart', function (e) { isDown = true; lastPos = null; onMove(e); }, { passive: false }); canvas.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', function () { isDown = false; lastPos = null; tool.style.display = 'none'; }); } })();