diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index 5ebb502e8c1b49977238de812740f082dc68438d..30903c2cf20c8e5ea8fe29bbb243807045f4596a 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -163,15 +163,203 @@
<div class="col-auto" style="background-color: #ffffff;">
<p>
Wir stellen eine Vorlage für Projektwebseiten zur Verfügung.
-
-
-
-<!-- content: basic setup. adding logo to pages, adding new links to menu (or change existing), adding new pages-->
</p>
- <ol>
-
- </ol>
- </div>
+ <div class="help">
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
+ <small>Erste Schritte</small></a>
+ </h3>
+ </div>
+ <div id="collapse7" class="card-body collapse" style="">
+ <p>
+ Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
+ </p>
+ <ol>
+ <li> Anpassen der Standardwerte in settings.js
+ <p><b> Wichtig: </b> Werden diese Werte nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
+ </p>
+ <p>
+ Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei.
+ </p>
+ <img src="/img/help/select_settings.png" width="95%"/>
+ <p>
+ Passen Sie die Werte für projektname und projektseitenlink an, indem Sie die entsprechenden Werte in die Anführungszeichen schreiben.
+ </p>
+ <img src="/img/help/edit_settings.png" width="95%"/>
+ <p>
+ Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
+ </p>
+ </li>
+ <li> Anpassen der Kontaktperson in <em> kontakt.html </em>
+ <p><b> Wichtig: </b> Wird die Kontaktperson nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
+ </p>
+ <p>
+ Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> kontakt.html </em> und editieren Sie die Datei.
+ </p>
+ <img src="/img/help/select_contact.png" width="95%"/>
+ <p>
+ Passen Sie die Kontaktperson und die Mailadresse an, indem Sie alle Vorkommen von Max Mustermann und die Mailadresse durch Ihre Werte ersetzen.
+ </p>
+ <img src="/img/help/edit_contact.png" width="95%"/>
+ <p>
+ Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
+ </p>
+ </li>
+ <li>
+ Nun können Sie den Administrator kontaktieren, der Ihr Projekt am Runner registriert, um das Projekt auf unserem Server auszurollen.
+ </li>
+ </ol>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
+ role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+ <small>Logo hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse3" class="card-body collapse" style="">
+ <p> Um ein Logo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
+ <ol>
+ <li>
+ Öffnen Sie den Ordner <em> public </em>
+ </li>
+ <li>
+ Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
+ <img src="/img/help/publicplus.png" width="95%"/>
+ </li>
+ <li>
+ Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
+ <img src="/img/help/upload_logo.png" width="95%"/>
+ </li>
+ <li>
+ Öffnen Sie nun im Ordner <em> public </em> die Datei <em> settings.js </em> und editieren diese.
+ <p>
+ In der Zeile mit <em>projektlogourl</em> schreiben Sie nun ./DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf <em> Commit changes </em> speichert die Datei.
+ </p>
+ <img src="/img/help/settings_logo.png" width="95%"/>
+ </li>
+ <li>
+ Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule.
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
+ <small>Neue Seite hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse4" class="card-body collapse" style="">
+ <p>
+ Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
+ <ol>
+ <li>
+ Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
+ <img src="/img/help/publicplus.png" width="95%"/>
+ </li>
+ <li>
+ Klicken Sie dort auf <em> New File </em>
+ </li>
+ <li>
+ Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
+ <textarea rows="28" cols="64" disabled="true">
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="generator" content="GitLab Pages">
+ <title>Neue Seite</title>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+ <div id="topbar">
+ <div id="menu" class="navbar"></div>
+ </div>
+ <div class="content">
+ <h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
+
+ <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
+
+ <h2> Seitentitel: </h2>
+
+ <p>
+ Content
+ </p>
+
+ <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
+ </div>
+ <script src="settings.js"> </script>
+ </body>
+</html>
+ </textarea>
+ <img src="/img/help/editnewpage.png" width="95%"/>
+ </li>
+ <li>
+ Nun können Sie noch den Inhalt der Seite anpassen. Wenn Sie mit dem Inhalt der Seite zufrieden sind, speichern Sie sie durch Klick auf <em> Commit changes </em>
+ </li>
+ <li>
+ Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
+ <p>https://transfer.hft-stuttgart.de/pages/PROJEKTNAME/DATEINAME</p>
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
+ <small>Menü bearbeiten</small></a>
+ </h3>
+ </div>
+ <div id="collapse5" class="card-body collapse" style="">
+ <p>
+ Wenn Sie das Menü am oberen Seitenrand bearbeiten wollen, führen Sie folgende Schritte durch:
+ <ol>
+ <li>
+ Öffnen Sie im Ordner <em> public </em> die Datei <em>settings.js</em> und editieren Sie diese.
+ </li>
+ <li>
+ Im Menüblock kopieren Sie einen bereits bestehenden Teil und fügen diesen im Anschluss ein. Ein solcher Block besteht dabei aus folgenden Anweisungen:
+ <img src="/img/help/settingmenublock.png" width="95%"/>
+ <ul>
+ <li>
+ <em>//Link 4: Kontakt </em> Dies ist ein Kommentar, der der Ordnung und Verständlichkeit des Codes dient
+ </li>
+ <li>
+ <em>let NAME = document.createElement("a") </em> Dies legt einen neuen Eintrag fest
+ </li>
+ <li>
+ <em>NAME.href = "addresse" </em> Dies legt die Adresse fest, auf die der neue Menüeintrag verweist. Dies kann zum Beispiel eine neu angelegte Seite sein.
+ </li>
+ <li>
+ <em>NAME.innerHTML="" </em> Dies legt den Text des Eintrags fest, also was später im Menü angezeigt wird
+ </li>
+ <li>
+ <em> menu.appendChild(NAME); </em> Dies fügt letztlich den Eintrag dem Menü hinzu.
+ </li>
+ </ul>
+ </li>
+ <li>
+ Nachdem Sie den Block entsprechend Ihrer Wünsche bearbeitet haben, klicken Sie auf <em> Commit changes </em>, um Ihre Änderungen zu speichern.
+ <img src="/img/help/settingsnewmenublock.png" width="95%"/>
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/help/jitsi.html b/help/jitsi.html
index 9ee3684756c724d16b776f44d6222760da91989e..7d2f9057cbc5d7f875d37827603585a35de663e5 100644
--- a/help/jitsi.html
+++ b/help/jitsi.html
@@ -19,11 +19,7 @@
<div style="background-color: #dadada;">
<div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
<div class="row">
- <!-- <div class="col-md-12">
- <h4 class="text-center">Jitsi</h4>
-
- </div>
- --> </div>
+ </div>
</div>
<div id="Jitsi" style="margin-top: 40px;margin-bottom: 30px;">
<div class="container" style="background-color: #ffffff;">
diff --git a/img/help/edit_contact.png b/img/help/edit_contact.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b4c4c9730b01043c2cbac2010f06d883edbd8b0
Binary files /dev/null and b/img/help/edit_contact.png differ
diff --git a/img/help/edit_settings.png b/img/help/edit_settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..18ee119d079e08e62554de1a83fcaff734a8e8df
Binary files /dev/null and b/img/help/edit_settings.png differ
diff --git a/img/help/editnewpage.png b/img/help/editnewpage.png
new file mode 100644
index 0000000000000000000000000000000000000000..eadd4b3632b0cac9325b7ec57e59942013b85488
Binary files /dev/null and b/img/help/editnewpage.png differ
diff --git a/img/help/publicplus.png b/img/help/publicplus.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad42dbc56b96a2ab02f419b38398789a5a1da26f
Binary files /dev/null and b/img/help/publicplus.png differ
diff --git a/img/help/select_contact.png b/img/help/select_contact.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6727c813d12323aea54048b0e061861077b3947
Binary files /dev/null and b/img/help/select_contact.png differ
diff --git a/img/help/select_settings.png b/img/help/select_settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2a165fe361c0f2861e5d08c012022ca53523037
Binary files /dev/null and b/img/help/select_settings.png differ
diff --git a/img/help/settingmenublock.png b/img/help/settingmenublock.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9ffafcbb9e4c7a47ef0b9e3a5030a6896a3dfa5
Binary files /dev/null and b/img/help/settingmenublock.png differ
diff --git a/img/help/settings_logo.png b/img/help/settings_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..86c5424fb67a514985a518262c535ed7fdb0126f
Binary files /dev/null and b/img/help/settings_logo.png differ
diff --git a/img/help/settingsnewmenublock.png b/img/help/settingsnewmenublock.png
new file mode 100644
index 0000000000000000000000000000000000000000..54db9aa325d3d38fe8216a061340ce5acd382567
Binary files /dev/null and b/img/help/settingsnewmenublock.png differ
diff --git a/img/help/upload_logo.png b/img/help/upload_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e937fb7fd7afacc580717c00283ae06db6e62d0
Binary files /dev/null and b/img/help/upload_logo.png differ