|
|
| 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>
| |
|
| |
| ```
| |
