Skip to content

Commit 308045b

Browse files
benoecklbenoeckl
committed
Update lab5
1 parent 825f221 commit 308045b

File tree

1 file changed

+88
-15
lines changed

1 file changed

+88
-15
lines changed

‎labs/lab5/dynamic-site/private/private.html‎

Lines changed: 88 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,100 @@
1-
<!-- TODO: Webseite mit 5 Themen (HTML5, CSS, JavaScript,
2-
FlexBox, GridBox), die mithilfe des z-Indexes
3-
übereinander liegen -->
4-
51
<!DOCTYPE html>
62
<html lang="de">
7-
83
<head>
94
<meta charset="UTF-8">
105
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11-
<title>Labor 5 - Login</title>
12-
<link rel="stylesheet" href="css/general.css">
6+
<title>Dein Interessensbereich</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
text-align: center;
11+
background-color: #f4f4f4;
12+
margin: 0;
13+
padding: 20px;
14+
}
15+
.container {
16+
position: relative;
17+
width: 80%;
18+
max-width: 600px;
19+
margin: auto;
20+
background: white;
21+
padding: 20px;
22+
border-radius: 10px;
23+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
24+
}
25+
.topic {
26+
position: absolute;
27+
width: 100%;
28+
padding: 20px;
29+
border-radius: 10px;
30+
transition: opacity 0.5s ease-in-out;
31+
}
32+
#html5 { background-color: lightcoral; z-index: 1; }
33+
#css { background-color: lightblue; z-index: 1; }
34+
#javascript { background-color: lightgreen; z-index: 1; }
35+
</style>
1336
</head>
14-
1537
<body>
16-
<div class="content-container" style="z-index: 0;">
17-
<h1>I am section 1</h1>
38+
<div class="container">
39+
<h1>Dein Interessensbereich</h1>
40+
<div id="html5" class="topic">
41+
<h2>HTML5</h2>
42+
<p>HTML5 ist die aktuelle Version der Hypertext Markup Language mit neuen Funktionen.</p>
43+
<ul>
44+
<li>Semantische Tags wie &lt;article&gt;, &lt;section&gt;, &lt;nav&gt;</li>
45+
<li>Unterstützung für Audio und Video ohne Plugins</li>
46+
<li>Canvas für 2D-Grafiken und Animationen</li>
47+
</ul>
1848
</div>
19-
<div class="content-container" style="z-index: 1;">
20-
<h1> I am section 2</h1>
49+
<div id="css" class="topic">
50+
<h2>CSS</h2>
51+
<p>CSS ermöglicht das Styling von Webseiten mit Layout-Techniken wie Flexbox und Grid.</p>
52+
<ul>
53+
<li>Flexbox für flexible Layouts</li>
54+
<li>CSS Grid für komplexe Designs</li>
55+
<li>Animationen und Transitionen</li>
56+
</ul>
2157
</div>
22-
<div class="content-container" style="z-index: 2;">
23-
<h1> I am section 3</h1>
58+
<div id="javascript" class="topic">
59+
<h2>JavaScript</h2>
60+
<p>JavaScript ermöglicht interaktive Webseiten mit dynamischen Inhalten.</p>
61+
<ul>
62+
<li>DOM-Manipulation für dynamische Webseiten</li>
63+
<li>Event Handling und Benutzerinteraktion</li>
64+
<li>Integration von APIs und Datenbanken</li>
65+
</ul>
2466
</div>
25-
</body>
67+
</div>
68+
<script>
69+
document.addEventListener("DOMContentLoaded", async () => {
70+
try {
71+
const response = await fetch("/getUserData");
72+
const data = await response.json();
2673

74+
if (!data.topic) {
75+
window.location.href = "registration.html";
76+
return;
77+
}
78+
79+
document.querySelectorAll(".topic").forEach(el => el.style.display = "none");
80+
81+
const topicMap = {
82+
"html": "html5",
83+
"css": "css",
84+
"js": "javascript"
85+
};
86+
87+
const activeTopic = document.getElementById(topicMap[data.topic]);
88+
if (activeTopic) {
89+
activeTopic.style.display = "block";
90+
activeTopic.style.zIndex = "10";
91+
} else {
92+
console.error("Kein passendes Thema gefunden für:", data.topic);
93+
}
94+
} catch (error) {
95+
console.error("Fehler beim Laden der Benutzerdaten:", error);
96+
}
97+
});
98+
</script>
99+
</body>
27100
</html>

0 commit comments

Comments
 (0)