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