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

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

parent c49f9a84
Pipeline #11226 passed with stage
in 10 seconds
Hide whitespace changes
Inline Side-by-side
public/assets/css/main.css
View file @ e1823a9c
......@@ -1124,18 +1124,18 @@ section,
}
.services .service-item .icon {
font-size: 36px;
padding: 20px 20px;
font-size: 28px; /* vorher 36 px */
padding: 12px 12px; /* vorher: 20px */
border-radius: 4px;
position: relative;
margin-bottom: 25px;
margin-bottom: 15px; /* vorher: 25px */
display: inline-block;
line-height: 0;
transition: 0.3s;
}
.services .service-item h3 {
font-size: 24px;
font-size: 18px; /* vorher: 24px */
font-weight: 700;
}
......@@ -1144,14 +1144,14 @@ section,
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
padding: 8px 20px;
font-size: 14px; /* vorher: 16px */
padding: 6px 16px; /* vorher: 8px 20px */
}
.services .service-item .read-more i {
line-height: 0;
margin-left: 5px;
font-size: 18px;
font-size: 16px; /* vorher: 18px */
}
.services .service-item.item-cyan {
......@@ -2936,3 +2936,164 @@ section,
font-weight: bold;
margin-left: 10px; /* Abstand zwischen dem Logo und dem Text */
}
/* ----- New Service item --- Juni 2025 -----***/
/*--------------------------------------------------------------
# New Services Section
--------------------------------------------------------------*/
.newservices .newservice-item {
background-color: var(--surface-color);
box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
height: 100%;
padding: 30px 15px; /* vorher: 60px 30px */
text-align: center;
transition: 0.3s;
border-radius: 5px;
}
.newservices .newservice-item .icon {
font-size: 36px;
padding: 20px 20px;
border-radius: 4px;
position: relative;
margin-bottom: 25px;
display: inline-block;
line-height: 0;
transition: 0.3s;
}
.newservices .newservice-item h3 {
font-size: 24px;
font-weight: 700;
}
.newservices .newservice-item .read-more {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
padding: 8px 20px;
}
.newservices .newservice-item .read-more i {
line-height: 0;
margin-left: 5px;
font-size: 18px;
}
.newservices .newservice-item.item-cyan {
border-bottom: 3px solid #0dcaf0;
}
.newservices .newservice-item.item-cyan .icon {
color: #0dcaf0;
background: rgba(13, 202, 240, 0.1);
}
.newservices .newservice-item.item-cyan .read-more {
color: #0dcaf0;
}
.newservices .newservice-item.item-cyan:hover {
background: #0dcaf0;
}
.newservices .newservice-item.item-orange {
border-bottom: 3px solid #fd7e14;
}
.newservices .newservice-item.item-orange .icon {
color: #fd7e14;
background: rgba(253, 126, 20, 0.1);
}
.newservices .newservice-item.item-orange .read-more {
color: #fd7e14;
}
.newservices .newservice-item.item-orange:hover {
background: #fd7e14;
}
.newservices .newservice-item.item-teal {
border-bottom: 3px solid #20c997;
}
.newservices .newservice-item.item-teal .icon {
color: #20c997;
background: rgba(32, 201, 151, 0.1);
}
.newservices .newservice-item.item-teal .read-more {
color: #20c997;
}
.newservices .newservice-item.item-teal:hover {
background: #20c997;
}
.newservices .newservice-item.item-red {
border-bottom: 3px solid #df1529;
}
.newservices .newservice-item.item-red .icon {
color: #df1529;
background: rgba(223, 21, 4, 0.1);
}
.newservices .newservice-item.item-red .read-more {
color: #df1529;
}
.newservices .newservice-item.item-red:hover {
background: #df1529;
}
.newservices .newservice-item.item-indigo {
border-bottom: 3px solid #6610f2;
}
.newservices .newservice-item.item-indigo .icon {
color: #6610f2;
background: rgba(102, 16, 242, 0.1);
}
.newservices .newservice-item.item-indigo .read-more {
color: #6610f2;
}
.newservices .newservice-item.item-indigo:hover {
background: #6610f2;
}
.newservices .newservice-item.item-pink {
border-bottom: 3px solid #f3268c;
}
.newservices .newservice-item.item-pink .icon {
color: #f3268c;
background: rgba(243, 38, 140, 0.1);
}
.newservices .newservice-item.item-pink .read-more {
color: #f3268c;
}
.newservices .newservice-item.item-pink:hover {
background: #f3268c;
}
.newservices .newservice-item:hover h3,
.newservices .newservice-item:hover p,
.newservices .newservice-item:hover .read-more {
color: #fff;
}
.newservices .newservice-item:hover .icon {
background: #fff;
}
/* ---- End New Service -- added Juni 2025 ***/
public/index.html
View file @ e1823a9c
......@@ -296,141 +296,7 @@ body {
}
/* debut juni 25*/
const width = 900, height = 500;
const nodes = [
{ id: "AP1", title: "Kompetenzmatrix für KI", description: "Interdisziplinäre KI-Kompetenzen entwickeln" },
{ id: "AP2", title: "Ethische Leitlinien", description: "Verantwortungsvoller KI-Einsatz" },
{ id: "AP3", title: "Learning Analytics Infrastruktur", description: "Technische Basis für KI-Werkzeuge" },
{ id: "AP4", title: "Adaptive Tests", description: "KI-gestützte Bewertung und Schwierigkeitsvorhersage" },
{ id: "AP5", title: "Fachspezifische Programmierung", description: "Individuelle Lernpfade in Programmierung" },
{ id: "AP6", title: "KI-Kompetenz stärken", description: "Weiterbildung für Lernende und Lehrende" },
{ id: "AP7", title: "Evaluation & Verankerung", description: "Ergebnisse verbreiten & Integration" },
{ id: "AP8", title: "Textgenerierende KI", description: "Didaktischer Einsatz von ChatGPT & Co." }
];
const links = [
{ source: "AP1", target: "AP3" },
{ source: "AP2", target: "AP6" },
{ source: "AP3", target: "AP4" },
{ source: "AP4", target: "AP5" },
{ source: "AP5", target: "AP6" },
{ source: "AP6", target: "AP7" },
{ source: "AP8", target: "AP7" }
];
const svg = d3.select("#diagram").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.zoom().on("zoom", (event) => {
g.attr("transform", event.transform);
}));
svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("viewBox", "-0 -5 10 10")
.attr("refX", 23)
.attr("refY", 0)
.attr("orient", "auto")
.attr("markerWidth", 8)
.attr("markerHeight", 8)
.attr("xoverflow", "visible")
.append("svg:path")
.attr("d", "M 0,-5 L 10 ,0 L 0,5")
.attr("fill", "#999")
.style("stroke", "none");
const g = svg.append("g");
// Simulation setup
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id).distance(180))
.force("charge", d3.forceManyBody().strength(-600))
.force("center", d3.forceCenter(width / 2, height / 2));
// Draw links
const link = g.append("g")
.attr("stroke", "#999")
.selectAll("line")
.data(links)
.join("line")
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)");
// Draw nodes
const node = g.append("g")
.selectAll("g")
.data(nodes)
.join("g")
.attr("class", "node")
.call(drag(simulation));
node.append("rect")
.attr("width", 180)
.attr("height", 70)
.attr("x", -90)
.attr("y", -35)
.attr("rx", 10)
.attr("ry", 10)
.on("mouseover", (event, d) => showTooltip(event, d))
.on("mouseout", hideTooltip);
node.append("text")
.attr("text-anchor", "middle")
.attr("y", -10)
.text(d => d.title);
node.append("text")
.attr("text-anchor", "middle")
.attr("y", 15)
.attr("font-size", "0.75em")
.text(d => d.id);
simulation.on("tick", () => {
// Update links
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
// Update nodes
node.attr("transform", d => `translate(${d.x},${d.y})`);
});
// Dragging functions
function drag(simulation) {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x; d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x; d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null; d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
// Tooltip functions
const tooltip = d3.select("#tooltip");
function showTooltip(event, d) {
tooltip.style("opacity", 1)
.html(`<strong>${d.title}</strong><br>${d.description}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY + 10) + "px");
}
function hideTooltip() {
tooltip.style("opacity", 0);
}
/* fin juni 25*/
</style>
......@@ -657,13 +523,33 @@ const width = 900, height = 500;
<!-- Neue section in Juni 2025 -->
<!-- Neue Section für interaktive Arbeitspakete -->
<h2>KNIGHT Projektprozess - Arbeitspakete</h2>
<!-- Neue without name/ onglet Section -->
<section class="New Services Section">
<div id="diagram"></div>
<div class="tooltip" id="tooltip"></div>
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Entdecke die KNIGHT-Arbeitspakete</h2>
</div><!-- End Section Title -->
<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>
</section>
<!-- ende neue section in Juni 2025-->
<!-- Portfolio Section -->
......
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