update UI

views/DE/account/newInformation.pug

@@ -64,9 +64,9 @@ html(lang="de")
                 div(class="mx-4", style="color: gray;")
                     h4(class="pb-1") Step 2: Complete
                     p Please make sure you have completed the following before you publish your website.
-                    ul
-                        li project name, link, logo: setting.js
-                        li contact person: kontakt.html
+                    ol
+                        li Anpassen der Standardwerte in <i>settings.js</i>
+                        li Anpassen der Kontaktperson in <i>kontakt.html</i>
                 hr
                 div(class="mx-4", style="color: gray;")
                     h4(class="pb-1") Step 3: Publish

views/DE/account/updateInformation.pug

@@ -69,14 +69,18 @@ html(lang="de")
                     if !information.isPublished
                         h4(class="pb-1") Step 2: Complete
                         p Please make sure you have completed the following before you publish your website.
-                        ul
-                            li project name, link, logo: <a href=#{information.settingUrl} target="_blank">setting.js</a>
-                            li contact person: <a href=#{information.kontaktUrl} target="_blank">kontakt.html</a>
                     else    
-                        p NOTE:
-                        ul
-                            li Some parameters(?) can be updated here: <a href=#{information.settingUrl} target="_blank">setting.js</a>
-                            li and the Contact Person here: <a href=#{information.kontaktUrl} target="_blank">kontakt.html</a>
+                        p <b><i>NOTE:</b></i>
+                    div(class="card")
+                        div(class="card-header") 1. Anpassen der Standardwerte in <a href=#{information.settingUrl} 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.
+                    div(class="card")
+                        div(class="card-header") 2. Anpassen der Kontaktperson in <a href=#{information.kontaktUrl} target="_blank"><i>kontakt.html</i></a>
+                        div(class="card-body") Passen Sie die Kontaktperson und die Mailadresse an, indem Sie alle Vorkommen von Max Mustermann und die Mailadresse durch Ihre Werte ersetzen.
+                            img(src="https://m4lab.hft-stuttgart.de/img/help/edit_contact.png", class="img-fluid", style="border: 1px solid gray;", alt="kontakt.html")
+                            p Klicken Sie anschließend auf <i>commit changes</i>, um die Änderungen zu speichern.
                 hr
                 div(class="mx-4")
                     if !information.isPublished