add help

views/DE/account/newInformation.pug

@@ -85,10 +85,10 @@ html(lang="de")
                 hr
                 div(class="mx-4", style="color: gray;")
                     h4(class="pb-1") Schritt 2: Dateneingabe
-                    p Bitte stellen Sie sicher, dass sie Folgendes abgeschlossen haben, bevor Sie Ihre Webseite veröffentlichen:
+                    p Bitte stellen Sie sicher in GitLab, dass sie Folgendes abgeschlossen haben, bevor Sie Ihre Webseite veröffentlichen:
                     ol
-                        li index.html
-                        li Anpassen der Standardwerte in <i>settings.js</i>
+                        li Bearbeiten Sie ihre <i>index.html</i>
+                        li Anpassen der Einstellungen in <i>settings.js</i>
 
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")

views/DE/account/updateInformation.pug

@@ -71,17 +71,39 @@ html(lang="de")
                         input(type="submit", class="btn btn-primary", value="Speichern")
                 hr
                 div(class="mx-4") 
-                    p <b><i>ANMERKUNG: (Guidelines to complete your website)</b></i>
-                    div(class="card")
-                        - let indexLink = "https://transfer.hft-stuttgart.de/gitlab/"+information.path+"/-/edit/master/public/home/index.html"
-                        - let settingLink = "https://transfer.hft-stuttgart.de/gitlab/"+information.path+"/-/edit/master/public/settings.js"
-                        div(class="card-header") 1. <a href=#{indexLink} target="_blank"><i>index.html</i></a>
-                        div(class="card-body")
-                            p Klicken Sie anschließend auf <i>commit changes</i>, um die Änderungen zu speichern.
-                        div(class="card-header") 2. Anpassen der Standardwerte in <a href=#{settingLink} target="_blank"><i>settings.js</i></a>
-                        div(class="card-body") Passen Sie die Werte für projektname und projektseitenlink an, indem Sie die entsprechenden Werte in die Anführungszeichen schreiben.
-                            img(src="https://m4lab.hft-stuttgart.de/img/help/edit_settings.png", class="img-fluid", style="border: 1px solid gray;", alt="setting.js")
-                            p Klicken Sie anschließend auf <i>commit changes</i>, um die Änderungen zu speichern.
+                    p <b><i>[ANMERKUNG]</b></i> Bitte stellen Sie sicher in GitLab, dass sie Folgendes abgeschlossen haben, bevor Sie Ihre Webseite veröffentlichen:
+                    div(class="help")
+                        div(class="card")
+                            - let indexLink = "https://transfer.hft-stuttgart.de/gitlab/"+information.path+"/-/edit/master/public/home/index.html"
+                            - let settingLink = "https://transfer.hft-stuttgart.de/gitlab/"+information.path+"/-/edit/master/public/settings.js"
+                            div(class="card-header")
+                                div(class="card-title")
+                                    | <a class="collapsed" data-toggle="collapse" href="#collapse-index" aria-expanded="false" aria-controls="collapse-index">
+                                    | 1. Bearbeiten Sie ihre <i>index.html</i></a>
+                            div(id="collapse-index" class="card-body collapse")
+                                p Klicken Sie <a href=#{indexLink} target="_blank"><i>index.html</i></a>. Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf <i>Commit changes</i>
+                                img(src="https://transfer.hft-stuttgart.de/img/help/save_file.png", class="img-fluid", style="border: 1px solid gray;", alt="index.html")
+                            div(class="card-header")
+                                div(class="card-title")
+                                    | <a class="collapsed" data-toggle="collapse" href="#collapse-setting" aria-expanded="false" aria-controls="collapse-setting">2. Anpassen der Einstellungen in <i>settings.js</i></a>
+                            div(id="collapse-setting" class="card-body collapse")
+                                p Klicken Sie <a href=#{settingLink} target="_blank"><i>settings.js</i></a>. Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/default_settings.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/switches.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/pr_logo.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/ template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen. Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/menu.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Profile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/partic.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Hier ist ein Beispiel mit zwei Teilnehmenden:
+                                img(src="https://transfer.hft-stuttgart.de/img/help/partic2.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/f_logos.png", class="img-fluid", style="border: 1px solid gray;")
+                                p Klicken Sie anschließend auf commit changes , um die Änderungen zu speichern.
+                                img(src="https://transfer.hft-stuttgart.de/img/help/edit_settings_generic.png", class="img-fluid", style="border: 1px solid gray;")
+
                 hr
                 div(class="mx-4")
                     div(class="alert alert-danger" role="alert") <h5><strong>Webseite löschen</strong></h5>