Add chapter studienübersicht
This commit is contained in:
Leonetienne
178
studienuebersicht/style.css
Normal file
178
studienuebersicht/style.css
Normal file
@@ -0,0 +1,178 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.figure {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-areas:
|
||||
"sem1 sem2 sem3 sem4 sem5 sem6"
|
||||
}
|
||||
|
||||
.table,
|
||||
.table .sem {
|
||||
grid-gap: 3mm;
|
||||
}
|
||||
|
||||
.table .cell {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 16pt;
|
||||
color: #fff;
|
||||
word-wrap: break-word;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.table .sem {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 1fr;
|
||||
grid-template-rows: 1fr repeat(5, 2fr);
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"cell1 pra"
|
||||
"cell2 pra"
|
||||
"cell3 pra"
|
||||
"cell4 pra"
|
||||
"cell5 pra";
|
||||
}
|
||||
|
||||
.table .sem .sem1 {
|
||||
grid-area: sem1
|
||||
}
|
||||
.table .sem .sem2 {
|
||||
grid-area: sem2
|
||||
}
|
||||
.table .sem .sem3 {
|
||||
grid-area: sem3
|
||||
}
|
||||
.table .sem .sem4 {
|
||||
grid-area: sem4
|
||||
}
|
||||
.table .sem .sem5 {
|
||||
grid-area: sem5
|
||||
}
|
||||
.table .sem .sem6 {
|
||||
grid-area: sem6
|
||||
}
|
||||
|
||||
.table .sem6 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr repeat(5, 2fr);
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"pra1 pra2"
|
||||
"pra1 pra2"
|
||||
"pra1 pra2"
|
||||
"pra1 pra2"
|
||||
"pra1 pra2";
|
||||
}
|
||||
|
||||
.table .sem6 .pra1 {
|
||||
grid-area: pra1;
|
||||
}
|
||||
|
||||
.table .sem6 .pra2 {
|
||||
grid-area: pra2;
|
||||
}
|
||||
|
||||
.table .sem .cell.header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.table .sem .cell.cell1 {
|
||||
grid-area: cell1;
|
||||
}
|
||||
.table .sem .cell.cell2 {
|
||||
grid-area: cell2;
|
||||
}
|
||||
.table .sem .cell.cell3 {
|
||||
grid-area: cell3;
|
||||
}
|
||||
.table .sem .cell.cell4 {
|
||||
grid-area: cell4;
|
||||
}
|
||||
.table .sem .cell.cell5 {
|
||||
grid-area: cell5;
|
||||
}
|
||||
.table .sem .cell.cell6 {
|
||||
grid-area: cell6;
|
||||
}
|
||||
.table .sem .cell.cell-pra {
|
||||
grid-area: pra;
|
||||
}
|
||||
.table .sem .cell > .text-vertical {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
transform: scale(-1);
|
||||
}
|
||||
|
||||
body {
|
||||
--col-passed: #2e9635;
|
||||
--col-failed-once: #a6a620;
|
||||
--col-failed-twice: #b43825;
|
||||
--col-pending: #6725b8;
|
||||
--col-upcoming: #2c6cd4;
|
||||
--col-not-listed: #8b8b8b;
|
||||
}
|
||||
|
||||
.table .cell.header {
|
||||
background-color: #333;
|
||||
}
|
||||
.table .cell.passed {
|
||||
background-color: var(--col-passed);
|
||||
}
|
||||
.table .cell.failed-once {
|
||||
background-color: var(--col-failed-once);
|
||||
}
|
||||
.table .cell.failed-twice {
|
||||
background-color: var(--col-failed-twice);
|
||||
}
|
||||
.table .cell.pending {
|
||||
background-color: var(--col-pending);
|
||||
}
|
||||
.table .cell.upcoming {
|
||||
background-color: var(--col-upcoming);
|
||||
}
|
||||
.table .cell.not-listed {
|
||||
background-color: var(--col-not-listed);
|
||||
}
|
||||
|
||||
.legend {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 16pt;
|
||||
padding: 0.5em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.legend > span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.legend .passed {
|
||||
color: var(--col-passed);
|
||||
}
|
||||
.legend .failed-once {
|
||||
color: var(--col-failed-once);
|
||||
}
|
||||
.legend .failed-twice {
|
||||
color: var(--col-failed-twice);
|
||||
}
|
||||
.legend .pending {
|
||||
color: var(--col-pending);
|
||||
}
|
||||
.legend .upcoming {
|
||||
color: var(--col-upcoming);
|
||||
}
|
||||
.legend .not-listed {
|
||||
color: var(--col-not-listed);
|
||||
}
|
||||
|
||||
168
studienuebersicht/table.html
Normal file
168
studienuebersicht/table.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!--
|
||||
The cells use the coloring-classes "passed", "pending", "failed-once", "failed-twice", "upcoming", and "not-listed" depending on your assessment status.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="figure">
|
||||
<div class="table">
|
||||
<div class="sem sem1">
|
||||
<div class="cell header">1. Semester</div>
|
||||
<div class="cell cell1 passed">
|
||||
Selbst- und Methodenkompetenzen
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell2 passed">
|
||||
Einführung in die Informatik
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell3 passed">
|
||||
Hardware-Konzepte
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell4 passed">
|
||||
Prozedurale Programmierung
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell5 passed">
|
||||
Diskrete Mathematik
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell-pra passed">
|
||||
<div class="text-vertical">Praxismodul I (6 CP)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sem sem2">
|
||||
<div class="cell header">2. Semester</div>
|
||||
<div class="cell cell1 passed">
|
||||
Betriebssysteme
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell2 passed">
|
||||
Datenbanken
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell3 passed">
|
||||
Netzwerke
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell4 passed">
|
||||
Objektorientierte Programmierung
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell5 passed">
|
||||
Statistik
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell-pra passed">
|
||||
<div class="text-vertical">Praxismodul II (6 CP)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sem sem3">
|
||||
<div class="cell header">3. Semester</div>
|
||||
<div class="cell cell1 passed">
|
||||
QSP-Modul I
|
||||
<br>Programmieren grafischer Oberflächen
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell2 passed">
|
||||
WPF-Modul
|
||||
<br>Machine Learning
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell3 pending">
|
||||
Web-Entwicklung
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell4 passed">
|
||||
Software-Engineering
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell5 pending">
|
||||
Software-Qualität
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell-pra pending">
|
||||
<div class="text-vertical">Praxismodul III (6 CP)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sem sem4">
|
||||
<div class="cell header">4. Semester</div>
|
||||
<div class="cell cell1 upcoming">
|
||||
QSP-Modul II
|
||||
<br><Name>
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell2 upcoming">
|
||||
QSP-Modul III
|
||||
<br><Name>
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell3 upcoming">
|
||||
Wissenschaftliches Arbeiten
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell4 upcoming">
|
||||
Requirements-Engineering
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell5 upcoming">
|
||||
Praktische Projektarbeit
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell-pra upcoming">
|
||||
<div class="text-vertical">Praxismodul III (6 CP)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sem sem5">
|
||||
<div class="cell header">5. Semester</div>
|
||||
<div class="cell cell1 not-listed">
|
||||
QSP-Modul IV
|
||||
<br><Name>
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell2 not-listed">
|
||||
QSP-Modul V
|
||||
<br><Name>
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell3 not-listed">
|
||||
Client/Server-Anwendungen
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell4 not-listed">
|
||||
User-Experience
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell5 not-listed">
|
||||
Praktische Projektarbeit
|
||||
<br>(6 CP)
|
||||
</div>
|
||||
<div class="cell cell-pra not-listed">
|
||||
<div class="text-vertical">Projektmanagement und Teamorientierstes Projekt (6 CP)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sem sem6">
|
||||
<div class="cell header">6. Semester</div>
|
||||
<div class="cell pra1 not-listed">
|
||||
<div class="text-vertical">Praxismodul V (6 CP)</div>
|
||||
</div>
|
||||
<div class="cell pra2 not-listed">
|
||||
<div class="text-vertical">Bachelorarbeit (6 CP)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
Legende: <span class="passed">Bestanden</span>, <span class="failed-once">Fehlversuch</span>, <span class="failed-twice">2. Fehlversuch</span>, <span class="pending">Angemeldet</span>, <span class="upcoming">Geplant im kommenden Semester</span>, <span class="not-listed">Keine Anmeldung</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user