From b16dd8458d32fee02d3c970029093a0de59a4f99 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Tue, 22 Sep 2026 16:31:45 +0200
Subject: [PATCH]

---
 .../04_schnittstellenformate/persons.html     | 99 +++++++++++++++++++
 .../04_schnittstellenformate/persons2.xml     | 68 +++++++++++++
 2 files changed, 167 insertions(+)
 create mode 100644 02_advanced/unterricht/tag11/04_schnittstellenformate/persons.html
 create mode 100644 02_advanced/unterricht/tag11/04_schnittstellenformate/persons2.xml

diff --git a/02_advanced/unterricht/tag11/04_schnittstellenformate/persons.html b/02_advanced/unterricht/tag11/04_schnittstellenformate/persons.html
new file mode 100644
index 0000000..f964dc5
--- /dev/null
+++ b/02_advanced/unterricht/tag11/04_schnittstellenformate/persons.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <title>Personenliste</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        background: #f4f6f8;
+        padding: 2rem;
+        color: #1f2937;
+        margin: 0;
+      }
+      h1 {
+        margin-bottom: 1.5rem;
+      }
+      .grid {
+        display: flex;
+        gap: 1.5rem;
+        flex-wrap: wrap;
+      }
+      .card {
+        background: white;
+        border-radius: 8px;
+        padding: 1.25rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        width: 260px;
+        border: 2px solid #3b82f6;
+      }
+      .card[data-gender='f'] {
+        border-color: #ec4899;
+      }
+      .badge {
+        background: #e5e7eb;
+        font-size: 0.75rem;
+        padding: 2px 6px;
+        border-radius: 4px;
+        margin-right: 4px;
+      }
+      ul {
+        margin: 0.5rem 0 0 0;
+        padding-left: 1.2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Personenliste</h1>
+    <div id="app" class="grid"></div>
+
+    <!-- Hier liegt dein originales XML unangetastet -->
+    <script id="xml-data" type="text/xml">
+      <persons>
+        <person category="human" gender="m">
+          <firstName>Max</firstName>
+          <lastName>Mustermann</lastName>
+          <age>30</age>
+          <hobbies>
+            <hobby>Tennis</hobby>
+            <hobby>Schach</hobby>
+          </hobbies>
+        </person>
+        <person gender="f">
+          <firstName>Jane</firstName>
+          <lastName>Doe</lastName>
+          <age>23</age>
+          <hobbies>
+            <hobby>Zocken</hobby>
+            <hobby>Tanzen</hobby>
+          </hobbies>
+        </person>
+      </persons>
+    </script>
+
+    <script>
+      const xmlText = document.getElementById('xml-data').textContent;
+      const xmlDoc = new DOMParser().parseFromString(xmlText, 'text/xml');
+      const container = document.getElementById('app');
+
+      xmlDoc.querySelectorAll('person').forEach((p) => {
+        const hobbies = Array.from(p.querySelectorAll('hobbies hobby'))
+          .map((h) => `<li>${h.textContent}</li>`)
+          .join('');
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.dataset.gender = p.getAttribute('gender') || '';
+        card.innerHTML = `
+        <h3>${p.querySelector('firstName')?.textContent} ${p.querySelector('lastName')?.textContent}</h3>
+        <p>
+          <span class="badge">Alter: ${p.querySelector('age')?.textContent}</span>
+          <span class="badge">Geschlecht: ${p.getAttribute('gender')}</span>
+        </p>
+        <strong>Hobbys:</strong>
+        <ul>${hobbies}</ul>
+      `;
+        container.appendChild(card);
+      });
+    </script>
+  </body>
+</html>
diff --git a/02_advanced/unterricht/tag11/04_schnittstellenformate/persons2.xml b/02_advanced/unterricht/tag11/04_schnittstellenformate/persons2.xml
new file mode 100644
index 0000000..c270ea1
--- /dev/null
+++ b/02_advanced/unterricht/tag11/04_schnittstellenformate/persons2.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet type="text/xsl" href="#stylesheet"?>
+<persons>
+  <!-- Eingebettetes XSL-Stylesheet -->
+  <xsl:stylesheet id="stylesheet" xml:id="stylesheet" version="1.0"
+                  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                  xmlns:xml="http://www.w3.org/XML/1998/namespace">
+    <xsl:output method="html" encoding="UTF-8" indent="yes"/>
+
+    <xsl:template match="/">
+      <html lang="de">
+        <head>
+          <meta charset="utf-8"/>
+          <title>Personenübersicht</title>
+          <style>
+            body { font-family: system-ui, sans-serif; background: #f4f6f8; padding: 2rem; color: #1f2937; }
+            h1 { margin-bottom: 1.5rem; }
+            .grid { display: flex; gap: 1.5rem; flex-wrap: wrap; }
+            .card { background: white; border-radius: 8px; padding: 1.25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.08); width: 260px; border: 4px solid #3b82f6; }
+            .card[data-gender="f"] { border-color: #ec4899; }
+            .badge { background: #e5e7eb; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
+            ul { margin: 0.5rem 0 0 0; padding-left: 1.2rem; }
+          </style>
+        </head>
+        <body>
+          <h1>Personenliste</h1>
+          <div class="grid">
+            <xsl:for-each select="persons/person">
+              <div class="card" data-gender="{@gender}">
+                <h3><xsl:value-of select="firstName"/>&#160;<xsl:value-of select="lastName"/></h3>
+                <p>
+                  <span class="badge">Alter: <xsl:value-of select="age"/></span>
+                  <span class="badge">Geschlecht: <xsl:value-of select="@gender"/></span>
+                </p>
+                <strong>Hobbys:</strong>
+                <ul>
+                  <xsl:for-each select="hobbies/hobby">
+                    <li><xsl:value-of select="."/></li>
+                  </xsl:for-each>
+                </ul>
+              </div>
+            </xsl:for-each>
+          </div>
+        </body>
+      </html>
+    </xsl:template>
+  </xsl:stylesheet>
+
+  <!-- Nutzdaten -->
+  <person category="human" gender="m">
+    <firstName>Max</firstName>
+    <lastName>Mustermann</lastName>
+    <age>30</age>
+    <hobbies>
+      <hobby>Tennis</hobby>
+      <hobby>Schach</hobby>
+    </hobbies>
+  </person>
+  <person gender="f">
+    <firstName>Jane</firstName>
+    <lastName>Doe</lastName>
+    <age>23</age>
+    <hobbies>
+      <hobby>Zocken</hobby>
+      <hobby>Tanzen</hobby>
+    </hobbies>
+  </person>
+</persons>
\ No newline at end of file