Key Features & Integration

Diese Vorlage bietet eine solide und reaktionsfähige visuelle Basis für eine Anmeldeseite. Ihr modularer Aufbau und das übersichtliche CSS erleichtern die Anpassung und Integration in verschiedene Umgebungen. Sie dient als hervorragender Ausgangspunkt für die Entwicklung von Benutzeroberflächen.

Hauptmerkmale

Hauptmerkmale für die Login-Seite.

Table 1. Hauptmerkmale
Responsives Design Beschreibung
Responsives Design Das Seitenlayout passt sich an verschiedene Bildschirmgrößen an und wechselt auf kleineren Geräten (Mobiltelefone) von einem Zwei-Spalten- zu einem Ein-Spalten-Layout.
Zwei-Spalten-Layout (Desktop) Die Seite ist in einen linken Bereich (für das Login-Formular) und einen rechten Bereich (für ein Hintergrundbild) unterteilt.
Standard-Login-Felder Enthält Felder für Benutzernamen, Passwort und Sprachauswahl.
Angemeldet bleiben-Kontrollkästchen: Ein einfaches Kontrollkästchen für die Angemeldet bleiben-Option.
Hilfe- und Wartungssymbole Enthält SVG-Symbole für den Zugriff auf Hilfe- oder Wartungsinformationen.
Siemens-Schriftart-Integration Verwendet @import für die Schriftart Siemens Sans und zeigt damit die Absicht, den Siemens IX Designprinzipien zu folgen.
Grundlegende Formular-Stilgebung Konfigurierbare Stile für Eingabefelder, Beschriftungen, Schaltflächen und Fehlermeldungen.

HTML-Struktur

Die Hauptabschnitte des HTML-Codes sind:
Table 2. HTML-Struktur
HTML-Struktur Beschreibung
<div class="page-container"> Der Hauptcontainer für das gesamte Seitenlayout. Verwendet Flexbox, um die linke und rechte Seite anzuordnen.
<div class="left-side"> Enthält das Logo und das Login-Formular. Auf Desktop-Geräten nimmt es ungefähr die Hälfte der Seitenbreite ein.
<div class="right-side"> Enthält ein Hintergrundbild, das auf der rechten Seite der Desktop-Version angezeigt wird. Es ist auf Mobilgeräten ausgeblendet.
<div class="logo-container"> Container für das Firmenlogo.
<div class="content-container"> Umschließt das Login-Formular, stellt sicher, dass es zentriert ist und die maximale Breite nicht überschreitet.
<div class="login-form-container"> Ein spezieller Container für das Formular selbst.
<div class="form-group"> Ein Standard-Wrapper für jedes Formularelement (Label, Eingabefeld, kleiner Text, Fehlermeldung).
<div class="checkbox-group">

und <label class="checkbox-control">

 Eine spezielle Struktur für das Kontrollkästchen Angemeldet bleiben, die sicherstellt, dass der Text neben dem Kontrollkästchen steht.
<div class="help-icon-absolute-wrap">,

<span class="help-icon-wrapper">, <span class="icon-button-group">

 Container für die Hilfe- und Wartungssymbole, die SVG verwenden.

CSS Styling

Stile werden direkt im <style>-Block eingefügt, der sich im Kopfbereich der HTML-Datei befindet.

Table 3. CSS Styling
Stil Beschreibung
Basis-Stile (body, .page-container) Legt die Standardschriftart (Siemens Sans, Roboto), Nullränder und Flexbox für das Hauptlayout fest.
Seitenlayout (.left-side, .right-side) Definiert Breiten, Abstände und Positionierung für die linke und rechte Seite. Die rechte Seite verwendet background-image für einen visuellen Effekt.
Responsive Anpassungen (@media (max-width: 768px)) Für kleinere Bildschirme ändert sich das Layout zu einer spaltenbasierten Anordnung (flex-direction: column), die linke Seite nimmt die volle Breite ein und die rechte Seite wird ausgeblendet (display: none).
Formularstile (.login-form-container, .form-group, input, label, select, button) Definiert das Erscheinungsbild der Eingabefelder, Beschriftungen (einschließlich des erforderlichen Sternchens), des Auswahlfelds und des Login-Buttons.
Checkbox-Stile (.checkbox-group, .checkbox-control, .checkbox-text) Verwendet display: flex auf label.checkbox-control, um das Kontrollkästchen und den Text nebeneinander anzuordnen.
Symbolstile (.help-icon, .maintenance-icon) Definiert die Größe und Farbe der SVG-Symbole.

Verwendung und Bereitstellung

  • Datei speichern: Kopieren Sie den gesamten bereitgestellten Code (siehe das Codebeispiel unterhalb) in einen Texteditor und speichern Sie ihn mit der .html-Erweiterung (zum Beispiel login.html). Stellen Sie sicher, dass die Dateicodierung auf UTF-8 gesetzt ist.
  • Platzierung der Bilddateien:
    • logo.png (wird für das Logo verwendet)
    • loginscreen.svg (wird für den Hintergrund auf der rechten Seite verwendet)

    Legen Sie diese Bilddateien im selben Verzeichnis wie Ihre login.html-Datei ab. Dies ist notwendig, da die Bildpfade im Code relativ sind (zum Beispiel src="logo.png").

  • Im Browser öffnen: Doppelklicken Sie auf die .html-Datei, um sie in Ihrem Webbrowser zu öffnen.

Beispiel

Das folgende Beispiel zeigt den Code für die Login-Seite:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Siemens Sans', 'Roboto', sans-serif;
            background-color: white;
        }

        .page-container {
            display: flex;
            min-height: 100vh;
            position: relative;
        }

        .left-side {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 40px;
            align-items: center;
            width: 50%;
            margin-right: 50%;
        }

        .right-side {
            position: fixed;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background-image: url('loginscreen.svg');
            background-repeat: no-repeat;
            background-size: auto calc(100% + 40px);
            background-position: left -50px;
        }

        .logo-container {
            width: 100%;
            max-width: 400px;
            margin-bottom: 40px;
            text-align: center;
        }

        .logo-container img {
            width: 20%;
            height: auto;
        }

        .content-container {
            width: 100%;
            max-width: 400px;
        }

        .grant-debug {
            padding: 20px;
        }

        .grant-debug details {
            margin-top: 20px;
        }

        .login-help {
            display: none;
        }

        @media (max-width: 768px) {
            .page-container {
                flex-direction: column;
            }

            .left-side {
                padding: 20px;
                width: 100%;
                margin-right: 0;
            }

            .right-side {
                display: none;
            }
        }

        /* Login Form */
        .login-form-container {
            width: 100%;
        }

        .login-title {
            color: black;
            font-size: 1.8125rem;
            line-height: 120%;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: left;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        label {
            display: block;
            color: rgb(0, 0, 0);
            margin-bottom: 8px;
            text-align: left;
            font-weight: bold;
        }

        label.required::after {
            content: "*";
            color: #ff0000;
            margin-left: 2px;
            display: inline;
        }

        input[type="text"],
        input[type="password"],
        .language-select {
            width: 100%;
            height: 44px;
            padding: 0 8px;
            font-size: 16px;
            border: 1px solid #79797a;
            box-sizing: border-box;
            outline: none;
            background: #fff;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        .language-select:focus {
            border-color: #0057fa;
            box-shadow: 0 0 0 1px #0057fa;
        }

        .form-text {
            font-size: 12px;
            color: #535353;
            margin-top: 4px;
            text-align: left;
        }

        .error-message {
            display: none;
            color: #ff0000;
            font-size: 12px;
            margin-top: 4px;
        }

        .checkbox-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .checkbox-control {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            margin-top: 20px;
        }

        .checkbox-control input[type="checkbox"] {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .checkbox-text {
            color: black;
            font-size: 14px;
        }

        .login-submit {
            width: 30%;
            height: 36px;
            background-color: #a8aaac;
            color: white;
            border: none;
            font-size: 14px;
            font-weight: 700;
            margin-top: 8px;
            cursor: pointer;
            border-radius: 4px;
            display: block;
            margin-left: 0;
        }

        .help-icon-absolute-wrap {
            width: 100%;
            margin-top: 18px;
            text-align: left;
        }

        .help-icon-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon-button-group {
            position: relative;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .help-icon,
        .maintenance-icon {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 32px;
            height: 32px;
            color: #0057fa;
            display: block;
        }

        .help-icon svg,
        .maintenance-icon svg {
            width: 100%;
            height: 100%;
        }

        .help-icon svg path,
        .maintenance-icon svg path {
            fill: #0057fa;
        }
    </style>
</head>

<body>
    <div class="page-container">
        <div class="left-side">
            <div class="logo-container">
                <img src="logo.png" alt="Logo">
            </div>
            <div class="content-container">
                <div class="login-form-container">
                    <h2 class="login-title" id="loginTitle">Login</h2>
                    <form id="loginForm" action="#" method="post" autocomplete="off" novalidate>
                        <div class="form-group">
                            <label for="userName" class="required" id="lbl-userName">User name</label>
                            <input type="text" name="userName" id="userName" autofocus>
                            <small class="form-text" id="help-userName">Please enter your user name.</small>
                            <div id="err-userName" class="error-message">User name cannot be empty!</div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="required" id="lbl-password">Password</label>
                            <input type="password" name="password" id="password">
                            <small class="form-text" id="help-password">Please enter your password.</small>
                            <div id="err-password" class="error-message">Password cannot be empty!</div>
                        </div>
                        <div class="checkbox-group">
                            <label for="keepLoggedInCheckbox" class="checkbox-control">
                                <input type="checkbox" name="keepLoggedIn" id="keepLoggedInCheckbox">
                                <span class="checkbox-text" id="toggle-label">Keep me logged in</span>
                            </label>
                        </div>

                        <button type="submit" class="login login-submit btn btn-secondary" id="loginBtn">Login</button>
                        <div class="help-icon-absolute-wrap">
                            <span class="help-icon-wrapper">
                                <a href="https://www.winccoa.com/documentation/WinCCOA/latest/en_US/index.html"
                                    target="_blank" class="icon-button-group" <span class="icon-button-group">
                                    <svg class="help-icon" viewBox="0 0 512 512" width="32" height="32"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <g transform="translate(42.666667, 42.666667)">
                                                <path fill="#0057fa"
                                                    d="M291.76704,163.504 C291.76704,177.01952 288.33216,188.82176 281.479253,198.90112 C275.828267,207.371093 266.358187,216.549547 253.042987,226.434987 C245.378987,231.682347 240.331947,236.618667 237.916587,241.257813 C234.87744,246.90624 233.376213,255.371093 233.376213,266.666667 L190.710827,266.666667 C190.710827,249.530027 192.53504,237.027413 196.165333,229.162667 C200.394453,219.679573 209.571627,210.098773 223.686187,200.42048 C230.350293,195.374933 235.188693,190.2368 238.214827,184.994773 C241.839787,179.143253 243.664,172.49216 243.664,165.028693 C243.664,153.13024 240.125013,144.26304 233.070293,138.404907 C227.4336,134.177067 220.56768,132.059947 212.501333,132.059947 C199.39328,132.059947 189.911467,136.398507 184.065067,145.069013 C179.829333,151.518293 177.7056,159.787733 177.7056,169.868587 L177.7056,170.173227 L132.34368,170.173227 C132.34368,143.751253 140.703147,123.790507 157.43488,110.274773 C171.554773,98.9922133 189.007787,93.3346133 209.77344,93.3346133 C227.933653,93.3346133 243.865813,96.86848 257.571627,103.9232 C280.37504,115.62624 291.76704,135.494827 291.76704,163.504 Z M426.666667,213.333333 C426.666667,331.153707 331.153707,426.666667 213.333333,426.666667 C95.51296,426.666667 3.55271368e-14,331.153707 3.55271368e-14,213.333333 C3.55271368e-14,95.51168 95.51296,3.55271368e-14 213.333333,3.55271368e-14 C331.153707,3.55271368e-14 426.666667,95.51168 426.666667,213.333333 Z M384,213.333333 C384,119.226667 307.43872,42.6666667 213.333333,42.6666667 C119.227947,42.6666667 42.6666667,119.226667 42.6666667,213.333333 C42.6666667,307.43872 119.227947,384 213.333333,384 C307.43872,384 384,307.43872 384,213.333333 Z M213.332053,282.666667 C198.60416,282.666667 186.665387,294.60544 186.665387,309.333333 C186.665387,324.061227 198.60416,336 213.332053,336 C228.059947,336 239.99872,324.061227 239.99872,309.333333 C239.99872,294.60544 228.059947,282.666667 213.332053,282.666667 Z" />
                                            </g>
                                        </g>
                                    </svg>
                            </span>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="right-side">
            <div class="grant-debug">
            </div>
        </div>
    </div>
</body>

</html>

Die Login-Seite:

Figure 1. Login-Seite

Anpassung und Integration

Diese Vorlage dient als Ausgangspunkt und kann vollständig angepasst werden:

  • Visuelle Anpassung: Passen Sie CSS-Klassen, Farben, Schriftgrößen und das Layout an Ihre Marke an.
  • Felder hinzufügen oder entfernen: Sie können ganz einfach <div class="form-group">-Blöcke hinzufügen oder entfernen, um die Formularfelder zu ändern.
  • Lokalisierung: Aktualisieren Sie Beschriftungstexte und Hilfenachrichten, um verschiedene Sprachen zu unterstützen.

Integration mit dem Siemens IX Design System

Der Code importiert bereits Schriftarten von Siemens IX mit @import '@siemens/ix/scss/mixins/font';. Um Siemens IX vollständig zu integrieren und die Vorteile seiner Komponenten (wie ix-input, ix-button, ix-toggle und andere) zu nutzen, gehen Sie wie folgt vor:

  • Ersetzen Sie Standard-HTML-Elemente durch die entsprechenden IX-Komponenten
  • Befolgen Sie die Siemens IX Designrichtlinien. Weitere Informationen zur Verwendung und Anpassung der Siemens IX-Komponenten sowie zu Designprinzipien finden Sie in der offiziellen Dokumentation: Guidelines overview | Siemens Industrial Experience.

Integration mit Keycloak (oder ähnlichen Identity Providern)

Diese HTML/CSS-Vorlage eignet sich hervorragend zur Erstellung eines benutzerdefinierten Themes in Identitätsmanagement-Systemen wie Keycloak. Keycloak unterstützt umfangreiche UI-Anpassungen für Anmeldeseiten durch die Verwendung von eigenen Themes.

  • Keycloak Theme-Struktur: Ein Standard-Keycloak-Theme enthält FreeMarker Template Language (.ftl)-Dateien, die HTML generieren. Sie sollten Ihren HTML/CSS-Code in diese .ftl-Dateien einbetten (zum Beispiel login.ftl).
  • Dynamische Inhalte: Damit Ihr Theme in Keycloak korrekt funktioniert, ersetzen Sie statische Texte und Fehlermeldungen durch die dynamischen Variablen und Logik von Keycloak. Dies ist wichtig für Funktionen wie Internationalisierung und die Anzeige von Backend-Fehlern.
  • Formularaktionen: Das action="#"-Attribut in Ihrem Formular sollte auf die korrekte URL für die Login-Verarbeitung von Keycloak aktualisiert werden.
  • Weitere Informationen zur Anpassung der Keycloak-Oberfläche und zur Arbeit mit Themes finden Sie in der offiziellen Dokumentation: https://www.keycloak.org/ui-customization/themes.