Enrico und Yannick: Die Seite wurde geleert.

2026-05-20T09:42:01Z

Die Seite wurde geleert.

← Nächstältere Version		Version vom 20. Mai 2026, 09:42 Uhr
Zeile 1:		Zeile 1:
	~~```html~~
	~~<!DOCTYPE html>~~
	~~<html lang="de">~~
	~~<head>~~
	~~<meta charset="UTF-8">~~
	~~<meta name="viewport" content="width=device-width, initial-scale=1.0">~~
	~~<title>Meine Dreiecks-Lernwelt</title>~~
	~~<script src="https://cdn.tailwindcss.com"></script>~~
	~~<style>~~
	~~.triangle-shape { transition: all 0.5s ease-in-out; }~~
	~~</style>~~
	~~</head>~~
	~~<body class="bg-blue-50 min-h-screen p-4 md:p-8">~~
	~~<div class="max-w-3xl mx-auto bg-white rounded-3xl shadow-xl p-6 md:p-10">~~
	~~<h1 class="text-3xl md:text-4xl font-bold text-blue-900 mb-6 text-center">Entdecke die Welt der Dreiecke 📐</h1>~~

	~~<p class="text-gray-600 mb-8 text-center text-lg">Klicke auf die Schaltflächen, um die Dreiecksform live zu verändern!</p>~~

	~~<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">~~
	~~<button onclick="updateTriangle('gleichseitig')" class="p-4 bg-yellow-100 hover:bg-yellow-200 rounded-2xl transition border-2 border-yellow-300 font-bold text-yellow-900">Gleichseitig</button>~~
	~~<button onclick="updateTriangle('gleichschenklig')" class="p-4 bg-green-100 hover:bg-green-200 rounded-2xl transition border-2 border-green-300 font-bold text-green-900">Gleichschenklig</button>~~
	~~<button onclick="updateTriangle('rechtwinklig')" class="p-4 bg-red-100 hover:bg-red-200 rounded-2xl transition border-2 border-red-300 font-bold text-red-900">Rechtwinklig</button>~~
	~~</div>~~

	~~<div id="display-area" class="bg-gray-50 rounded-2xl p-8 border-2 border-dashed border-gray-200 flex flex-col items-center">~~
	~~<div id="shape-visual" class="w-40 h-32 bg-blue-500 triangle-shape mb-6" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>~~
	~~<h2 id="info-title" class="text-2xl font-bold text-blue-900 mb-2">Wähle ein Dreieck!</h2>~~
	~~<p id="info-text" class="text-gray-700 text-center leading-relaxed">Hier erfährst du, was das gewählte Dreieck so besonders macht.</p>~~
	~~</div>~~
	~~</div>~~

	~~<script>~~
	~~const info = {~~
	~~gleichseitig: {~~
	~~title: "Das Gleichseitige Dreieck",~~
	~~text: "Alle drei Seiten sind gleich lang. Die Form ist perfekt symmetrisch.",~~
	~~clip: "polygon(50% 0%, 0% 100%, 100% 100%)",~~
	~~color: "bg-yellow-500"~~
	},
	~~gleichschenklig: {~~
	~~title: "Das Gleichschenklige Dreieck",~~
	~~text: "Zwei Seiten sind gleich lang, eine ist die Basis.",~~
	~~clip: "polygon(50% 10%, 20% 100%, 80% 100%)",~~
	~~color: "bg-green-500"~~
	},
	~~rechtwinklig: {~~
	~~title: "Das Rechtwinklige Dreieck",~~
	~~text: "Ein Winkel beträgt exakt 90 Grad. Eine Seite bildet den rechten Winkel.",~~
	~~clip: "polygon(0% 0%, 0% 100%, 100% 100%)",~~
	~~color: "bg-red-500"~~
	}
	};

	~~function updateTriangle(type) {~~
	~~const data = info[type];~~
	~~document.getElementById('info-title').innerText = data.title;~~
	~~document.getElementById('info-text').innerText = data.text;~~

	~~const visual = document.getElementById('shape-visual');~~
	~~visual.style.clipPath = data.clip;~~
	~~visual.className = `w-40 h-32 ${data.color} triangle-shape mb-6`;~~
	}
	~~</script>~~
	~~</body>~~
	~~</html>~~

	~~```~~

Enrico und Yannick: Die Seite wurde neu angelegt: „```html Meine Dreiecks-Lernwelt

Benutzer:Enrico und Yannick/Seite 1 - Versionsgeschichte

Enrico und Yannick: Die Seite wurde geleert.

Enrico und Yannick: Die Seite wurde neu angelegt: „```html Meine Dreiecks-Lernwelt .triangle-shape { transition: all 0.5s ease-in-out; }

Enrico und Yannick: Die Seite wurde neu angelegt: „```html Meine Dreiecks-Lernwelt