299 lines
6.3 KiB
HTML
299 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Zertifikat Level A</title>
|
||
<style>
|
||
@page {
|
||
size: A4;
|
||
margin: 6mm 8mm 10mm 8mm;
|
||
|
||
@bottom-center {
|
||
content: "Seite " counter(page) "/" counter(pages);
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-size: 9pt;
|
||
color: #64748b;
|
||
}
|
||
}
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #fff;
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
color: #1f2937;
|
||
font-size: 10pt;
|
||
line-height: 1.26;
|
||
}
|
||
|
||
body {
|
||
height: 100%;
|
||
}
|
||
|
||
.certificate {
|
||
border: 1px solid #d9e2ec;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
|
||
/* A4-Höhe minus page margins */
|
||
min-height: 281mm;
|
||
|
||
padding: 7mm 9mm 5mm 9mm;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.content-area {
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.logo {
|
||
text-align: center;
|
||
margin-bottom: 4mm;
|
||
}
|
||
|
||
.logo img {
|
||
max-height: 46px;
|
||
max-width: 180px;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: 19pt;
|
||
font-weight: 700;
|
||
color: #0d2f57;
|
||
margin: 0 0 4mm 0;
|
||
}
|
||
|
||
.intro,
|
||
.program-line,
|
||
.program-name,
|
||
.user-name,
|
||
.mandant-name {
|
||
text-align: center;
|
||
}
|
||
|
||
.intro {
|
||
margin-bottom: 2mm;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 17pt;
|
||
font-weight: 700;
|
||
color: #0d2f57;
|
||
margin: 2mm 0;
|
||
}
|
||
|
||
.mandant-name {
|
||
font-size: 12pt;
|
||
margin-bottom: 4mm;
|
||
}
|
||
|
||
.program-line {
|
||
margin-bottom: 1.5mm;
|
||
}
|
||
|
||
.program-name {
|
||
font-size: 14pt;
|
||
font-weight: 700;
|
||
color: #0d2f57;
|
||
margin-bottom: 5mm;
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 3mm 0;
|
||
text-align: justify;
|
||
}
|
||
|
||
.focus-box {
|
||
background: #f8fbff;
|
||
border: 1px solid #dce3ea;
|
||
border-radius: 8px;
|
||
padding: 4mm 5mm;
|
||
margin: 4mm 0;
|
||
}
|
||
|
||
.focus-title {
|
||
font-weight: 700;
|
||
color: #0d2f57;
|
||
margin-bottom: 2mm;
|
||
}
|
||
|
||
ul {
|
||
margin: 0;
|
||
padding-left: 5mm;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 1.3mm;
|
||
}
|
||
|
||
.dates-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 12mm;
|
||
margin-top: 5mm;
|
||
margin-bottom: 5mm;
|
||
font-weight: 700;
|
||
font-size: 10.5pt;
|
||
}
|
||
|
||
.dates-right {
|
||
text-align: right;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.bottom-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
gap: 16mm;
|
||
margin-top: 4mm;
|
||
}
|
||
|
||
.left-col {
|
||
width: 54%;
|
||
}
|
||
|
||
.right-col {
|
||
width: 46%;
|
||
text-align: right;
|
||
}
|
||
|
||
.reference-id {
|
||
margin-top: 1mm;
|
||
font-size: 8.5pt; /* kleiner */
|
||
line-height: 1.15;
|
||
white-space: nowrap; /* GUID nie umbrechen */
|
||
}
|
||
|
||
.reference-id a {
|
||
color: #0d2f57;
|
||
text-decoration: underline;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.issuer-title {
|
||
font-weight: 700;
|
||
margin-bottom: 2mm;
|
||
}
|
||
|
||
.issuer-name {
|
||
margin-bottom: 2mm;
|
||
display: inline-block;
|
||
text-align: right;
|
||
}
|
||
|
||
.signature {
|
||
margin-top: 1mm;
|
||
text-align: right;
|
||
}
|
||
|
||
.signature img {
|
||
height: 48px; /* höher */
|
||
max-width: 200px;
|
||
}
|
||
|
||
.footer-note {
|
||
flex: 0 0 auto;
|
||
margin-top: 5mm;
|
||
padding-top: 3mm;
|
||
text-align: center;
|
||
font-size: 8.8pt;
|
||
color: #526172;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="certificate">
|
||
|
||
<div class="content-area">
|
||
|
||
{% if logo_path %}
|
||
<div class="logo">
|
||
<img src="{{ logo_path }}" alt="Logo">
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="title">Nachweis über die erfolgreiche Teilnahme</div>
|
||
|
||
<div class="intro">Hiermit wird bestätigt, dass</div>
|
||
<div class="user-name">{{ user_name }}</div>
|
||
<div class="mandant-name">des Unternehmens {{ mandant_name }}</div>
|
||
|
||
<div class="program-line">das Schulungsprogramm</div>
|
||
<div class="program-name">„Compliance Verification – Level A“</div>
|
||
|
||
<p>
|
||
erfolgreich absolviert und alle vorgesehenen Prüfungen bestanden hat.
|
||
</p>
|
||
|
||
<p>
|
||
Im Rahmen der Schulung wurden strukturierte Kenntnisse im Bereich des Einsatzes
|
||
von Künstlicher Intelligenz in Organisationen vermittelt.
|
||
</p>
|
||
|
||
<div class="focus-box">
|
||
<div class="focus-title">Level A – Vermittelt wurden grundlegende Kenntnisse zu:</div>
|
||
<ul>
|
||
<li>Funktionsweise und Einsatz von KI-Systemen</li>
|
||
<li>Risiken, Verantwortung und menschlicher Kontrolle</li>
|
||
<li>Transparenz- und Kennzeichnungspflichten</li>
|
||
<li>grundlegender Dokumentation und internen Prozessen</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p>
|
||
Dieser Nachweis dokumentiert ausschließlich die erfolgreiche Teilnahme an der Schulung
|
||
sowie das Bestehen der innerhalb der Plattform vorgesehenen Prüfungen.
|
||
</p>
|
||
|
||
<p>
|
||
Er stellt keine Prüfung, Bewertung oder Bestätigung der tatsächlichen Umsetzung
|
||
im Unternehmen dar.
|
||
</p>
|
||
|
||
<p>
|
||
Ebenso handelt es sich nicht um eine Bestätigung rechtlicher Konformität,
|
||
keine behördliche Anerkennung und keinen Nachweis im Sinne gesetzlicher
|
||
oder normativer Anforderungen.
|
||
</p>
|
||
|
||
<div class="dates-row">
|
||
<div>Datum: {{ valid_from }}</div>
|
||
<div class="dates-right">Gültig bis: {{ valid_until }}</div>
|
||
</div>
|
||
|
||
<div class="bottom-row">
|
||
<div class="left-col">
|
||
<div class="reference-id">
|
||
<strong>Nachweis-ID:</strong>
|
||
<a href="{{ reference_url }}">{{ reference_id }}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-col">
|
||
<div class="issuer-title">Ausgestellt durch:</div>
|
||
<div class="issuer-name">ABC UG (haftungsbeschränkt)</div>
|
||
|
||
{% if signature_path %}
|
||
<div class="signature">
|
||
<img src="{{ signature_path }}" alt="Unterschrift">
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer-note">
|
||
Dieses Zertifikat wurde automatisiert erzeugt und ist über die angegebene Referenz verifizierbar.
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |