Skip to content
GitLab
Commit 3004e780 authored by Traboulsi's avatar Traboulsi
Browse files

Update public/assets/css/main.css, public/index.html

parent 55379720
Pipeline #11231 passed with stage
in 8 seconds
Hide whitespace changes
Inline Side-by-side
public/assets/css/main.css
View file @ 3004e780
......@@ -3095,5 +3095,84 @@ section,
.newservices .newservice-item:hover .icon {
background: #fff;
}
/* ---- New - ST ****/
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
background: #f7f7f7;
}
header {
text-align: center;
padding: 1rem;
background: #1976d2;
color: white;
font-size: 1.5rem;
font-weight: bold;
}
.description {
text-align: center;
font-size: 1rem;
padding: 0.5rem 2rem;
color: #333;
max-width: 800px;
margin: auto;
}
.tabs, #filter-bar {
display: flex;
justify-content: center;
margin: 0.5rem;
flex-wrap: wrap;
}
.tab, #filter-bar button {
padding: 0.5rem 1rem;
margin: 0.25rem;
background: #e0e0e0;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.3s;
font-size: 0.9rem;
}
.tab.active, #filter-bar button.active {
background: #1976d2;
color: white;
font-weight: bold;
}
svg {
width: 100%;
height: 80vh;
}
.node {
cursor: pointer;
transition: all 0.3s;
}
.node rect {
rx: 12;
ry: 12;
stroke-width: 1;
transition: all 0.3s;
}
.node text {
pointer-events: none;
font-size: 0.9rem;
}
.node.expanded rect {
stroke: #333;
stroke-width: 2;
}
.node.expanded text.desc {
display: block;
}
.desc {
display: none;
fill: #555;
font-size: 0.75rem;
}
.link {
stroke: #999;
stroke-opacity: 0.6;
stroke-width: 1px;
marker-end: url(#arrow);
}
/* ----- End New ST -----*/
/* ---- End New Service -- added Juni 2025 ***/
public/index.html
View file @ 3004e780
......@@ -534,20 +534,30 @@ body {
<div class="container">
<div class="row gy-4">
<!-- AP1 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="newservice-item item-cyan position-relative">
<!--<i class="bi bi-activity icon"></i>-->
<h3>Entwicklung einer Kompetenzmatrix für KI</h3>
<p>In diesem Arbeitspaket wird eine interdisziplinäre Kompetenzmatrix für KI-Kompetenzen in der Hochschulbildung entwickelt. Sie dient als Orientierungshilfe für die Lehre und wird mithilfe von Learning Analytics validiert.(Leitung: Prof. Uckelmann)</p>
<a href="ki-kompetenzen.html" class="read-more stretched-link"><span>Mehr erfahren</span> <i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
</div>
</div>
<div class="description">
Diese interaktive Visualisierung zeigt die Struktur des KNIGHT-Projekts mit allen Arbeitspaketen (APs). Sie können nach Themenbereichen oder konkreten APs filtern
und durch Klicken auf ein Paket mehr Informationen erhalten.
</div>
<div id="filter-bar">
<button data-filter="all" class="active">Alle</button>
<button data-filter="ethics">Ethik (AP2)</button>
<button data-filter="tech">Technik (AP3,4,5)</button>
<button data-filter="competence">Kompetenz (AP1,6)</button>
<button data-filter="dissemination">Evaluation & Transfer (AP7,8)</button>
</div>
<div class="tabs">
<div class="tab active" data-tag="ALL">Alle</div>
<div class="tab" data-tag="AP1">AP1</div>
<div class="tab" data-tag="AP2">AP2</div>
<div class="tab" data-tag="AP3">AP3</div>
<div class="tab" data-tag="AP4">AP4</div>
<div class="tab" data-tag="AP5">AP5</div>
<div class="tab" data-tag="AP6">AP6</div>
<div class="tab" data-tag="AP7">AP7</div>
<div class="tab" data-tag="AP8">AP8</div>
</div>
<svg></svg>
</div>
</section>
<!-- ende neue section in Juni 2025-->
......@@ -1329,6 +1339,128 @@ Implementations, and Perspectives
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
<!-- for the new ST Juni 2025 --->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const data = [
{ id: 'AP 1.1', group: 'AP1', cluster: 'competence', description: 'Kompetenzmodell entwickeln', x: 50, y: 50 },
{ id: 'AP 1.2', group: 'AP1', cluster: 'competence', description: 'Kompetenzmatrix validieren', x: 250, y: 50 },
{ id: 'AP 2.1', group: 'AP2', cluster: 'ethics', description: 'Ethische KI-Leitlinien', x: 50, y: 180 },
{ id: 'AP 3.1', group: 'AP3', cluster: 'tech', description: 'Learning Analytics Infrastruktur', x: 50, y: 310 },
{ id: 'AP 3.2', group: 'AP3', cluster: 'tech', description: 'Nutzerinterfaces entwickeln', x: 250, y: 310 },
{ id: 'AP 4.1', group: 'AP4', cluster: 'tech', description: 'Adaptive Tests konzipieren', x: 450, y: 310 },
{ id: 'AP 5', group: 'AP5', cluster: 'tech', description: 'Fachspezifische Umsetzung', x: 450, y: 50 },
{ id: 'AP 6', group: 'AP6', cluster: 'competence', description: 'KI-Zertifikate für Lehrende', x: 650, y: 50 },
{ id: 'AP 7', group: 'AP7', cluster: 'dissemination', description: 'Evaluation & Integration', x: 650, y: 180 },
{ id: 'AP 8', group: 'AP8', cluster: 'dissemination', description: 'Textgenerierende KI in Lehre', x: 650, y: 310 }
];
const links = [
{ source: 'AP 1.1', target: 'AP 1.2' },
{ source: 'AP 1.2', target: 'AP 3.1' },
{ source: 'AP 3.1', target: 'AP 3.2' },
{ source: 'AP 3.2', target: 'AP 4.1' },
{ source: 'AP 4.1', target: 'AP 5' },
{ source: 'AP 5', target: 'AP 6' },
{ source: 'AP 6', target: 'AP 7' },
{ source: 'AP 7', target: 'AP 8' }
];
const svg = d3.select("svg");
const width = window.innerWidth;
const height = window.innerHeight;
svg.append("defs").append("marker")
.attr("id", "arrow")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("fill", "#999");
const g = svg.append("g");
const link = g.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("class", "link")
.attr("x1", d => data.find(n => n.id === d.source).x + 80)
.attr("y1", d => data.find(n => n.id === d.source).y + 25)
.attr("x2", d => data.find(n => n.id === d.target).x)
.attr("y2", d => data.find(n => n.id === d.target).y + 25);
const node = g.selectAll(".node")
.data(data)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.x},${d.y})`)
.on("click", function(event, d) {
d3.select(this).classed("expanded", !d3.select(this).classed("expanded"));
});
node.append("rect")
.attr("width", 160)
.attr("height", 50)
.attr("fill", "#ccc")
.attr("stroke", "#999");
node.append("text")
.attr("x", 80)
.attr("y", 20)
.attr("text-anchor", "middle")
.text(d => d.id);
node.append("text")
.attr("class", "desc")
.attr("x", 80)
.attr("y", 40)
.attr("text-anchor", "middle")
.text(d => d.description);
d3.selectAll(".tab").on("click", function() {
const tag = this.dataset.tag;
d3.selectAll(".tab").classed("active", false);
d3.select(this).classed("active", true);
node.each(function(d) {
const visible = tag === "ALL" || d.group === tag;
d3.select(this)
.transition().duration(300)
.style("opacity", visible ? 1 : 0.1);
});
link.each(function(d) {
const show = (tag === "ALL" || data.find(n => n.id === d.source).group === tag || data.find(n => n.id === d.target).group === tag);
d3.select(this)
.transition().duration(300)
.style("opacity", show ? 1 : 0.05);
});
});
d3.selectAll("#filter-bar button").on("click", function() {
const filter = this.dataset.filter;
d3.selectAll("#filter-bar button").classed("active", false);
d3.select(this).classed("active", true);
node.each(function(d) {
const visible = filter === "all" || d.cluster === filter;
d3.select(this)
.transition().duration(300)
.style("opacity", visible ? 1 : 0.1);
});
link.each(function(d) {
const show = (filter === "all" || data.find(n => n.id === d.source).cluster === filter || data.find(n => n.id === d.target).cluster === filter);
d3.select(this)
.transition().duration(300)
.style("opacity", show ? 1 : 0.05);
});
});
</script>
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal