This commit is contained in:
Philippe Torrel
@@ -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>
|
||||||
@@ -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"/> <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>
|
||||||
Reference in New Issue
Block a user