Merge branch 'testing' of...

Merge branch 'testing' of https://transfer.hft-stuttgart.de/gitlab/m4lab_tv1/user-account into devel

Merge branch 'testing' of...
Merge branch 'testing' of https://transfer.hft-stuttgart.de/gitlab/m4lab_tv1/user-account into devel
0f5aaaf7 · Rosanny Sihombing · 5ed27b69 · 7383def8 · 0f5aaaf7 · 0f5aaaf7
Commit 0f5aaaf7 authored May 15, 2020 by Rosanny Sihombing
--- a/config/config.js
+++ b/config/config.js
@@ -9,8 +9,8 @@ module.exports = {
      saml: {
        path: process.env.SAML_PATH || '/saml/SSO',
        entryPoint: process.env.SAML_ENTRY_POINT || 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SSOService.php',
-        issuer: 'sp-account.m4lab.hft-stuttgart.de', //local metadata
+        //issuer: 'sp-account.m4lab.hft-stuttgart.de', //local metadata
-        //issuer: 'sp-account-testing.m4lab.hft-stuttgart.de', //testing metadata
+        issuer: 'sp-account-testing.m4lab.hft-stuttgart.de', //testing metadata
        //issuer: 'sp-account-prod.m4lab.hft-stuttgart.de', //production metadata
        logoutUrl: 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SingleLogoutService.php'
      }

--- a/public/js/registration.js
+++ b/public/js/registration.js
@@ -8,7 +8,7 @@ $('#inputEmail').change(function(){
        $('#emailWarning').empty()
        isEmailValid = data
        if(!isEmailValid) {
-            $('#emailWarning').html('M4_LAB account with this email address is already exist.')
+            $('#emailWarning').html('Mit dieser E-Mail-Adresse existiert bereits ein Benutzerkonto in unserem Transferportal.')
        }
        switchSubmitButton()
    })

--- a/routes/ToBeDeleted/routes-project.js
+++ b/routes/ToBeDeleted/routes-project.js
@@ -28,7 +28,8 @@ module.exports = function (app) {
                    name: mailinglistOverview[i].name,
                    src: mailinglistOverview[i].src,
                    projectstatus: mailinglistOverview[i].projectstatus,
-                    project_title: mailinglistOverview[i].project_title
+                    project_title: mailinglistOverview[i].project_title,
+                    keywords: mailinglistOverview[i].keywords
                });
            }

--- a/routes/routes-account.js
+++ b/routes/routes-account.js
@@ -58,11 +58,11 @@ module.exports = function (app, config, passport, i18n) {
  app.post(config.passport.saml.path,
    passport.authenticate(config.passport.strategy,
      {
-        failureRedirect: '/',
+        failureRedirect: '/account/',
        failureFlash: true
      }),
    function (req, res) {
-      res.redirect('/');
+      res.redirect('/account/');
    }
  );
@@ -250,7 +250,7 @@ module.exports = function (app, config, passport, i18n) {
              //req.flash('success', 'Profile updated!');
              req.flash('success', 'Ihr Benutzerprofil wurde aktualisiert!');
            }
-            res.redirect('/profile');
+            res.redirect('/account/profile');
        })
      }
    } else {
@@ -288,13 +288,13 @@ module.exports = function (app, config, passport, i18n) {
                //req.flash('error', "Sorry, your password was incorrect. Please double-check your password.")
                req.flash('error', "Das Passwort ist leider falsch. Bitte überprüfen Sie Ihre Eingabe.")
                //res.redirect('/security')
-                res.redirect('/security')
+                res.redirect('/account/security')
              }
              else {
                if ( newPwd != retypePwd ) {
                  //req.flash('error', "Passwords do no match. Please make sure you re-type your new password correctly.")
                  req.flash('error', 'Passwörter stimmen nicht überein. Bitte stellen Sie sicher, dass Sie das Passwort beide Male genau gleich eingeben.')
-                  res.redirect('/security')
+                  res.redirect('/account/security')
                }
                else {
                  // update password
@@ -323,7 +323,7 @@ module.exports = function (app, config, passport, i18n) {
                            }
                          });
                        }
-                        res.redirect('/security')
+                        res.redirect('/account/security')
                      })
                    });
                  });
@@ -411,7 +411,7 @@ module.exports = function (app, config, passport, i18n) {
        req.flash('success', 'Wenn Ihre E-Mail-Adresse registriert ist, wurde eine E-Mail mit dem weiteren Vorgehen an ' + emailAddress + ' versendet.');
      }
      //res.redirect('/forgotPwd'); // deployment
-      res.redirect('/forgotPwd'); // localhost
+      res.redirect('/account/forgotPwd'); // localhost
    });
  });
@@ -421,7 +421,7 @@ module.exports = function (app, config, passport, i18n) {
        //req.flash('error', 'Password reset token is invalid or has expired.');
        req.flash('error', 'Der Schlüssel zum zurücksetzen des Passworts ist ungültig oder abgelaufen.');
        //res.redirect('/forgotPwd'); // deployment
-        res.redirect('/forgotPwd'); // localhost
+        res.redirect('/account/forgotPwd'); // deployment
      }
      else {
        res.render(lang+'/account/reset');
@@ -514,7 +514,7 @@ module.exports = function (app, config, passport, i18n) {
            //req.flash('success', 'Your account has been created. Please log in.')
            req.flash('success', 'Ihr Benutzerkonto wurde angelegt. Bitte melden Sie sich an.')
          }
-          res.redirect('/registration');
+          res.redirect('/account/registration');
        })
      });
    });
@@ -532,5 +532,41 @@ module.exports = function (app, config, passport, i18n) {
      }
    })
  })
+  app.get('/contact', function (req, res) {
+      res.render(lang+'/account/contact', {
+        user: req.user
+      });
+    });
+    app.post('/contact', function(req, res, next) {
+      //methods.currentDate();
+      let emailAddress = req.body.inputEmail;
+      let supportAddress = "support-transfer@hft-stuttgart.de";
+      let inputName = req.body.name;
+      let inputContent = req.body.message;
+      let emailContent = "Es wurde eine Anfrage an das Transferportal gestellt: \n\n NAME: " + inputName + "\n NACHRICHT:\n "+ inputContent;
+      let emailSubject = "Ihre Anfrage an das Transferportal";
+      async.waterfall([
+        function(done) {
+            // send email
+            mailer.options.to = supportAddress;
+            mailer.options.cc = emailAddress;
+            mailer.options.subject = emailSubject;
+            mailer.options.text = emailContent;
+            mailer.transport.sendMail(mailer.options, function(err) {
+                done(err, 'done');
+              });
+          }
+      ], function(err) {
+        if (err) {
+          req.flash('error', 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+        }
+        else {
+          req.flash('success', 'Vielen Dank für Ihre Anfrage. Wir melden uns baldmöglichst bei Ihnen. Eine Kopie Ihrer Anfrage wurde an ' + emailAddress + ' versandt.');
+        }
+        //res.redirect('/forgotPwd'); // deployment
+        res.redirect('/account/contact'); // localhost
+      });
+    });
 };
\ No newline at end of file
--- a/views/DE/account/contact.pug
+++ b/views/DE/account/contact.pug
+doctype html
+html(lang="de")
+  head
+    title= "Kontakt"
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
+    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
+    link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
+    link(rel="stylesheet", type="text/css", href="/fonts/ionicons.min.css")
+    link(rel="stylesheet", type="text/css", href="/css/Contact-Form-Clean.css")
+    link(rel="stylesheet", type="text/css", href="/css/Testimonials.css")
+    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/custom/login.css")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+  body
+    div(class="container")
+        div(class="row")
+            div(class="col-md-12" style="margin-bottom: 40px;")
+                img(class="mx-auto" src="/img/Kontakt.jpg" width="100%")
+    div(class="contact-clean" style="background-color: rgb(234,234,234);")
+        if successes
+            for success in successes
+                div.alert.alert-success.alert-dismissible #{ success }
+                    a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
+        if errors
+            for error, i in errors
+                div.alert.alert-danger.alert-dismissible.fade.show #{ error }
+                    a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
+        form(method="POST")
+            h2(class="text_center") Kontaktieren Sie uns
+            div(class="form-group")
+                input#name(class="form-control" type="text" name="name" placeholder="Name")
+            div(class="form-group")
+                input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="E-Mail-Adresse*", maxlength="45" required)
+            div(class="form-group")
+                textarea#message(class="form-control" name="message" placeholder="Nachricht" rows="14")
+            div(class="form-group")
+                input#submitBtn(class="btn btn-primary" type="submit" style="background-color: #8a348b;" value="SENDEN")
+    div(class="contact-clean" style="background-color: rgb(234,234,234);padding: 80px;padding-top: 0px;")
+        form(method="POST")
+            p(style="margin-top: 25px;") <strong>Hochschule für Technik Stuttgart</strong><br/>Institut für Angewandte Forschung<br/>Innovative Hochschule - Projekt M4_LAB<br/>Schellingstr. 24<br/>70174 Stuttgart<br/>Deutschland<br/><br/><a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a><br/><br/><a href="https://www.hft-stuttgart.de/">www.hft-stuttgart.de</a> / <a href="https://www.hft-stuttgart.de/M4LAB">www.hft-stuttgart.de/M4LAB</a><br/>
+    div(style="background-color: rgba(138,52,139,0.45);")
+        div(class="container")
+            div(class="row")
+                div(class="col-md-4 col-lg-2")
+                div(class="col-md-4 col-lg-8")
+                    div(style="background-color: #feffff;margin: 0px;padding: 60px;padding-top: 20px;padding-bottom: 20px;")
+                        img(class="d-flex d-lg-flex justify-content-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Logo_TV1.png" width="100px" style="padding-bottom: 35px;")
+                        h2(class="text-center" style="color: #8a348b;") <strong>Transferportal</strong>
+                        p(class="text-center") Das Transferportal entsteht in einem Teilprojekt der Innovativen <a href="https://www.hft-stuttgart.de">Hochschule für Technik Stuttgart</a>. Im <a href="https://www.hft-stuttgart.de/forschung/innovative-hochschule-m4-lab">Innovationslabor M4_LAB</a> wird das Transferportal als eine Webpräsenz entwickelt, welches Wissen, Lösungen und Dienste für HFT-Mitglieder, externe Partner und die allgemeine Öffentlichkeit bereitstellt.<br/><br/>Es ergänzt die Informationen der allgemeinen HFT-Webseite durch konkrete Ergebnisse aus Forschung und Entwicklung, verfügbar in verschiedenster Form wie beispielsweise Daten, Dokumentationen und Software-Code.<br/><br/>Zudem stellt es Kollaborationsmittel für Projektpartner und später auch Partizipationsmöglichkeiten für die breite Öffentlichkeit bereit.
+                div(class="col-md-4 col-lg-2")
+    // jQuery
+    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
+    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
+    // Bootstrap
+    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
+    // M4_LAB
+    script(src="/js/headfoot.js")
--- a/views/DE/account/home.pug
+++ b/views/DE/account/home.pug
@@ -6,40 +6,36 @@ html(lang="de")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-    style.
-        .collapse {
-            display: none;
-        }
-        .collapse.in {
-            display: block;
-        }
-        .collapsing {
-            position: relative;
-            height: 0;
-            overflow: hidden;
-            -webkit-transition-timing-function: ease;
-            -o-transition-timing-function: ease;
-            transition-timing-function: ease;
-            -webkit-transition-duration: .35s;
-            -o-transition-duration: .35s;
-            transition-duration: .35s;
-            -webkit-transition-property: height,visibility;
-            -o-transition-property: height,visibility;
-            transition-property: height,visibility;
-        }
  body
    div(class="container-fluid")
-        div(class="row")
+        div(class="row min-vh-100 flex-column flex-md-row")
-            div(class="col-3")
+            aside(class="col-12 col-md-2 p-0 flex-shrink-1")
-                h5
+                nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
-                    span #{user.firstname} #{user.lastname}
+                    div(class="collapse navbar-collapse")
-                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                        ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
-                    a(class="nav-link" href="/profile" aria-selected="true") Benutzerprofil
+                            li(class="nav-item")
-                    a(class="nav-link" href="/security" aria-selected="false") Sicherheitseinstellungen
+                                a(class="nav-link pl-0 text-nowrap" href="#")
-                    a(class="nav-link" href="/services" aria-selected="false") Projekte und Dienste
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
-                    a(class="nav-link" href="/logout" aria-selected="false") Logout
+                            li(class="nav-item")
-            div(class="col-sm-9")
+                                a(class="nav-link pl-0" href="/account/profile")
-                p content goes here
+                                    i(class="fa fa-user fa-fw")
+                                    span(class="d-none d-md-inline") Benutzerprofil
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/security")
+                                    i(class="fa fa-lock fa-fw")
+                                    span(class="d-none d-md-inline") Sicherheitseinstellungen
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/services")
+                                    i(class="fa fa-tasks fa-fw")
+                                    span(class="d-none d-md-inline") Projekte und Dienste
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/logout")
+                                    i(class="fa fa-sign-out-alt fa-fw")
+                                    span(class="d-none d-md-inline") Logout
+            main(class="col bg-faded py-3 flex-grow-1")
+                p Willkommen im Benutzerkonto-Bereich des HFT Transferportals
+                p In diesem Bereich können Sie Ihr Benutzerkonto pflegen.<br/> Dazu finden Sie auf der linken Seite verschiedene Menüs.
+                p Bei Rückfragen kontaktieren Sie uns bitte unter: <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
    // jQuery
    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
@@ -47,4 +43,4 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // M4_LAB
-    script(src="/js/headfootLogout.js")
+    script(src="/js/headfoot.js")
\ No newline at end of file
--- a/views/DE/account/profile.pug
+++ b/views/DE/account/profile.pug
@@ -6,39 +6,33 @@ html(lang="de")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-    style.
-        .collapse {
-            display: none;
-        }
-        .collapse.in {
-            display: block;
-        }
-        .collapsing {
-            position: relative;
-            height: 0;
-            overflow: hidden;
-            -webkit-transition-timing-function: ease;
-            -o-transition-timing-function: ease;
-            transition-timing-function: ease;
-            -webkit-transition-duration: .35s;
-            -o-transition-duration: .35s;
-            transition-duration: .35s;
-            -webkit-transition-property: height,visibility;
-            -o-transition-property: height,visibility;
-            transition-property: height,visibility;
-        }
  body
    div(class="container-fluid")
-        div(class="row")
+        div(class="row min-vh-100 flex-column flex-md-row")
-            div(class="col-3")
+            aside(class="col-12 col-md-2 p-0 flex-shrink-1")
-                h5
+                nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
-                    span #{user.firstname} #{user.lastname}
+                    div(class="collapse navbar-collapse")
-                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                        ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
-                    a(class="nav-link" href="#" aria-selected="true") Benutzerprofil
+                            li(class="nav-item")
-                    a(class="nav-link" href="/security" aria-selected="false") Sicherheitseinstellungen
+                                a(class="nav-link pl-0 text-nowrap" href="#")
-                    a(class="nav-link" href="/services" aria-selected="false") Projekte und Dienste
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
-                    a(class="nav-link" href="/logout" aria-selected="false") Logout
+                            li(class="nav-item")
-            div(class="col-sm-9")
+                                a(class="nav-link pl-0" href="/account/profile")
+                                    i(class="fa fa-user fa-fw" style="color:black;")
+                                    span(class="d-none d-md-inline" style="color:black;") Benutzerprofil
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/security")
+                                    i(class="fa fa-lock fa-fw")
+                                    span(class="d-none d-md-inline") Sicherheitseinstellungen
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/services")
+                                    i(class="fa fa-tasks fa-fw")
+                                    span(class="d-none d-md-inline") Projekte und Dienste
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/logout")
+                                    i(class="fa fa-sign-out-alt fa-fw")
+                                    span(class="d-none d-md-inline") Logout
+            main(class="col bg-faded py-3 flex-grow-1")
                if successes
                    for success in successes
                        div.alert.alert-success.alert-dismissible #{ success }
@@ -77,26 +71,26 @@ html(lang="de")
                                    }
                        div(class='form-group col-md-2')
                            label(for="firstname") Vorname
-                            input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname", value=user.firstname required)
+                            input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname", value=user.firstname, maxlength="45" required)
                        div(class='form-group col-md-2')
                            label(for="lastname") Nachname
-                            input#inputLastname(name="inputLastname", type="text", class="form-control", placeholder="Nachname", value=user.lastname required)
+                            input#inputLastname(name="inputLastname", type="text", class="form-control", placeholder="Nachname", value=user.lastname, maxlength="45" required)
                    div(class="form-row")
                        div(class='form-group col-md-8')
                            label(for="email") E-mail Adresse
-                            input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="Email", value=email required)
+                            input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="Email", value=email, maxlength="45" required)
                    div(class="form-row")
                        div(class='form-group col-md-8')
                            label(for="organisation") Unternehmen
-                            input#inputOrganisation(name="inputOrganisation", type="text", class="form-control", placeholder="Unternehmen", value=user.organisation)
+                            input#inputOrganisation(name="inputOrganisation", type="text", class="form-control", placeholder="Unternehmen", value=user.organisation, maxlength="45")
                    div(class="form-row")
                        div(class='form-group col-md-8')
                            label(for="industry") Branche
-                            input#inputIndustry(name="inputIndustry", type="text", class="form-control", placeholder="Branche", value=user.industry)
+                            input#inputIndustry(name="inputIndustry", type="text", class="form-control", placeholder="Branche", value=user.industry, maxlength="45")
                    div(class="form-row")
                        div(class='form-group col-md-8')
                            label(for="speciality") Fachgebiete
-                            input#inputSpeciality(name="inputSpeciality", type="text", class="form-control", placeholder="Fachgebiete", value=user.speciality)                    
+                            input#inputSpeciality(name="inputSpeciality", type="text", class="form-control", placeholder="Fachgebiete", value=user.speciality, maxlength="100")                    
                    input(type="submit", class="btn btn-primary", value="Speichern")
    // jQuery
@@ -105,4 +99,4 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // M4_LAB
-    script(src="/js/headfootLogout.js")
+    script(src="/js/headfoot.js")
\ No newline at end of file
--- a/views/DE/account/security.pug
+++ b/views/DE/account/security.pug
@@ -7,41 +7,36 @@ html(lang="de")
    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
    style.
-        .collapse {
-            display: none;
-        }
-        .collapse.in {
-            display: block;
-        }
-        .collapsing {
-            position: relative;
-            height: 0;
-            overflow: hidden;
-            -webkit-transition-timing-function: ease;
-            -o-transition-timing-function: ease;
-            transition-timing-function: ease;
-            -webkit-transition-duration: .35s;
-            -o-transition-duration: .35s;
-            transition-duration: .35s;
-            -webkit-transition-property: height,visibility;
-            -o-transition-property: height,visibility;
-            transition-property: height,visibility;
-        }
        .warning {
            font-size: 11px;
        }
  body
    div(class="container-fluid")
-        div(class="row")
+        div(class="row min-vh-100 flex-column flex-md-row")
-            div(class="col-3")
+            aside(class="col-12 col-md-2 p-0 flex-shrink-1")
-                h5
+                nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
-                    span #{user.firstName} #{user.lastName}
+                    div(class="collapse navbar-collapse")
-                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                        ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
-                    a(class="nav-link" href="/profile" aria-selected="true") Benutzerprofil
+                            li(class="nav-item")
-                    a(class="nav-link" href="#" aria-selected="false") Sicherheitseinstellungen
+                                a(class="nav-link pl-0 text-nowrap" href="#")
-                    a(class="nav-link" href="/services" aria-selected="false") Projekte und Dienste
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
-                    a(class="nav-link" href="/logout" aria-selected="false") Logout
+                            li(class="nav-item")
-            div(class="col-sm-9")
+                                a(class="nav-link pl-0" href="/account/profile")
+                                    i(class="fa fa-user fa-fw")
+                                    span(class="d-none d-md-inline") Benutzerprofil
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/security")
+                                    i(class="fa fa-lock fa-fw" style="color:black;")
+                                    span(class="d-none d-md-inline" style="color:black;") Sicherheitseinstellungen
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/services")
+                                    i(class="fa fa-tasks fa-fw")
+                                    span(class="d-none d-md-inline") Projekte und Dienste
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/logout")
+                                    i(class="fa fa-sign-out-alt fa-fw")
+                                    span(class="d-none d-md-inline") Logout
+            main(class="col bg-faded py-3 flex-grow-1")
                if successes
                    for success in successes
                        div.alert.alert-success.alert-dismissible #{ success }
@@ -50,21 +45,24 @@ html(lang="de")
                    for error, i in errors
                        div.alert.alert-danger.alert-dismissible.fade.show #{ error }
                            a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
-                form(class="needs-validation", method="post", action="/changePwd" novalidate)
+                form(class="needs-validation", method="post", action="/account/changePwd" novalidate)
-                    div(class="form-group row")
+                    div(class="form-row")
-                        label(for="currPwd") Aktuelles Passwort
+                        div(class='form-group col-md-8')
-                        input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)
+                            label(for="currPwd") Aktuelles Passwort
-                        div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
+                            input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)
-                    div(class="form-group row")
+                            div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
-                        label(for="newPwd") Neues Passwort
+                    div(class="form-row")
-                        input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
+                        div(class='form-group col-md-8')
-                        span#recommendation
+                            label(for="newPwd") Neues Passwort
-                        div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
+                            input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
-                    div(class="form-group row")
+                            span#recommendation
-                        label(for="confirm") Bestätigen Sie das neue Passwort
+                            div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
-                        input#inputConfirm(name="inputConfirm", type="password", class="form-control" required)
+                    div(class="form-row")
-                        span#message
+                        div(class='form-group col-md-8')
-                        div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
+                            label(for="confirm") Bestätigen Sie das neue Passwort
+                            input#inputConfirm(name="inputConfirm", type="password", class="form-control" required)
+                            span#message
+                            div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
                    input#updateBtn(type="submit", class="btn btn-primary", value="Passwort ändern" disabled)
    // jQuery
@@ -75,7 +73,7 @@ html(lang="de")
    // M4_LAB
    script(src="/js/security.js")
    script(src="/js/generalFunction.js")
-    script(src="/js/headfootLogout.js")
+    script(src="/js/headfoot.js")
    script.
        // check input fields
        'use strict';

--- a/views/DE/account/services.pug
+++ b/views/DE/account/services.pug
@@ -6,73 +6,39 @@ html(lang="de")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-    style.
-        .collapse {
-            display: none;
-        }
-        .collapse.in {
-            display: block;
-        }
-        .collapsing {
-            position: relative;
-            height: 0;
-            overflow: hidden;
-            -webkit-transition-timing-function: ease;
-            -o-transition-timing-function: ease;
-            transition-timing-function: ease;
-            -webkit-transition-duration: .35s;
-            -o-transition-duration: .35s;
-            transition-duration: .35s;
-            -webkit-transition-property: height,visibility;
-            -o-transition-property: height,visibility;
-            transition-property: height,visibility;
-        }
  body
    div(class="container-fluid")
-        div(class="row")
+        div(class="row min-vh-100 flex-column flex-md-row")
-            div(class="col-3")
+            aside(class="col-12 col-md-2 p-0 flex-shrink-1")
-                h5
+                nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
-                    span #{user.firstName} #{user.lastName}
+                    div(class="collapse navbar-collapse")
-                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                        ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
-                    a(class="nav-link" href="/profile" aria-selected="true") Benutzerprofil
+                            li(class="nav-item")
-                    a(class="nav-link" href="/security" aria-selected="false") Sicherheitseinstellungen
+                                a(class="nav-link pl-0 text-nowrap" href="#")
-                    a(class="nav-link" href="#" aria-selected="false") Projekte und Dienste
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
-                    a(class="nav-link" href="/logout" aria-selected="false") Logout
+                            li(class="nav-item")
-            div(class="col-sm-9")
+                                a(class="nav-link pl-0" href="/account/profile")
-                if successes
+                                    i(class="fa fa-user fa-fw")
-                    for success in successes
+                                    span(class="d-none d-md-inline") Benutzerprofil
-                        div.alert.alert-success.alert-dismissible #{ success }
+                            li(class="nav-item")
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
+                                a(class="nav-link pl-0" href="/account/security")
-                if errors
+                                    i(class="fa fa-lock fa-fw")
-                    for error, i in errors
+                                    span(class="d-none d-md-inline") Sicherheitseinstellungen
-                        div.alert.alert-danger.alert-dismissible.fade.show #{ error }
+                            li(class="nav-item")
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
+                                a(class="nav-link pl-0" href="/account/services")
-                table
+                                    i(class="fa fa-tasks fa-fw" style="color:black;")
-                    for item in project
+                                    span(class="d-none d-md-inline" style="color:black;") Projekte und Dienste
-                        tr
+                            li(class="nav-item")
-                            td <strong>#{item.title}</strong>
+                                a(class="nav-link pl-0" href="/logout")
-                            if item.userStatus
+                                    i(class="fa fa-sign-out-alt fa-fw")
-                                td
+                                    span(class="d-none d-md-inline") Logout
-                                    button(type="button", class="btn btn-secondary", onclick="unsubscribe()") Projektbeteiligung beenden
+            main(class="col bg-faded py-3 flex-grow-1")
-                            else
+                p Auf dieser Seite werden in Zukunft Funktionen bereitgestellt, um Ihre Beteiligung an Projekten und Aktivierung von Diensten zu organisieren. Diese Funktionen stehen zurzeit aber noch nicht zur Verfügung.
-                                td
-                                    button(type="button", class="btn btn-success", onclick="subscribe()") Am Projekt beteiligen
-                        tr
-                            td(colspan="2") #{item.summary}
-                        tr
-                            td(colspan="2") <i>Ansprechpartner: #{item.cp}</i>
    // jQuery
    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // M4_LAB
-    script(src="/js/headfootLogout.js")
+    script(src="/js/headfoot.js")
-    script.
\ No newline at end of file
-        function subscribe() {
-            alert("To be implemented: Ihre Anfrage wird an den zuständigen Projektleiter gesendet.")
-        }
-        function unsubscribe() {
-            alert("To be implemented: Ihre Projektbeteiligung wurde beendet und der zuständige Projektleiter in Kenntnis gesetzt.")
-        }
\ No newline at end of file
--- a/views/DE/project/project.html
+++ b/views/DE/project/project.html
+<div>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Projekte.png"
+                    width="100%"></div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" style="margin-bottom: 30px;">
+                <h4 class="text-center">Diese Seite bietet den Einstieg zu den Inhalten der unterschiedlichen Projekte,
+                    die über das Portal zur Verfügung gestellt werden.</h4>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-1"></div>
+            <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;">
+                <img class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center mx-auto"
+                    src="/img/Icon_Haken.png" height="150" />
+                <br />
+                <h2 class="text-center heading"><small><strong>Open-Source-/Open-Data-Projekte</strong></small><br></h2>
+                <p class="text-left">ÜFür die Veröffentlichung von Open-Source-Projekten steht Ihnen eine von der HFT
+                    Stuttgart selbstverwaltete Gitlab-Instanz bereit.
+                    <br /> <br />
+                    Eine Übersicht der aktuellen Open-Source-/Open-Data-Projekte erreichen Sie über diesen <a
+                        href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">
+                        <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>.<br />
+                </p>
+            </div>
+            <div class="col-lg-2"></div>
+            <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;">
+                <img src="/img/Icon_Sandclock.png"
+                    class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center mx-auto"
+                    height="150px" />
+                <br />
+                <h2 class="text-center heading"><small><strong>Andere Projekte</strong></small><br></h2>
+                <p class="text-left">Aktuell unterstützt das Transferportal Projekte, die einer Open-Source bzw.
+                    Open-Data-Lizenz
+                    unterliegen. Die Gründe hierfür liegen in den Lizenzbedingungen unserer Gitlab-Instanz als
+                    Plattform.
+                    <br /> <br />
+                    Künftig möchten wir auch andere Projekttypen unterstützen. Es soll dann beispielsweise möglich sein,
+                    Projektergebnisse zu veröffentlichen ohne die dazugehörigen Quellcodes oder Rohdaten offenzulegen.
+                    <br /> <br />
+                    Wir entwickeln das Portal kontinuierlich weiter und prüfen dabei auch andere Plattformen zur
+                    Nutzung.
+                </p>
+            </div>
+            <div class="col-lg-1"></div>
+        </div>
+        <hr />
+        <!-- text: Zweck dieser Seite / purpose of this page -->
+        <div>
+            <p class="text-justify"><i id="infoicon" class="fas fa-info-circle fa-lg"></i> Falls Sie mehr über die
+                Weiterentwicklung des Portals
+                erfahren wollen oder sich mit Anregungen auch aktiv einbringen
+                wollen, regen wir an, unsere Mailingliste <a href="https://www.listserv.dfn.de/sympa/info/transferportalhft">
+                <i class="fas fa-chevron-right">transferportalhft</i></a> zu abonnieren. Sie können uns aber auch
+                jederzeit
+                direkt unter <a href="/account/contact"><i class="fas fa-chevron-right">Kontakt</i></a> anschreiben.
+            </p>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <!-- text: Hilfestellung zu Gitlab / short help about Gitlab -->
+    <hr />
+    <h2 class="text-center heading"><small><strong>Hilfestellung zu GitLab</strong></small></h2>
+    <br />
+    <div class="help">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">
+                    <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false"
+                        aria-controls="collapse1">
+                        <small>Möchten Sie die Projektinhalte ansehen oder herunterladen?</small></a>
+                </h3>
+            </div>
+            <div id="collapse1" class="card-body collapse">
+                <p>
+                    Dann klicken Sie auf diesen
+                    <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><i
+                            class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>
+                    um die Liste aller im Gitlab erfassten Projekte zu sehen. Vor dort können Sie dann auf die einzelnen
+                    Projekte zugreifen.
+                    Ein Anmelden am Portal ist dazu nicht nötig.
+                </p>
+            </div>
+        </div>
+        <br />
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">
+                    <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false"
+                        aria-controls="collapse2">
+                        <small>Möchten Sie zu einem Projekt beitragen?</small></a>
+                </h3>
+            </div>
+            <div id="collapse2" class="card-body collapse">
+                <p>
+                    Sie können mittels Issues dem Projekteigentümer eine Rückmeldung geben bzw. einen Fehler melden.
+                    Darüberhinaus können Sie sich auch aktiv beteiligen. Dazu müssen Sie im Portal als Nutzer
+                    registriert sein.
+                </p>
+                <p>
+                    Wenn Sie noch kein Benutzerkonto haben, klicken Sie bitte oben auf den Link Benutzerkonto und folgen
+                    Sie dem System durch die Registrierungsprozedur.
+                </p>
+                <p>
+                    Haben Sie ein Benutzerkonto, befolgen Sie bitte folgende Schritte:
+                </p>
+                <ol>
+                    <li>
+                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">
+                            <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu
+                        gelangen.
+                    </li>
+                    <li>
+                        Melden Sie sich bei Gitlab an, indem Sie im Gitlab auf den Link Sign-In klicken.
+                    </li>
+                    <li>
+                        Sie werden dann auf eine Anmeldeseite von unserem Portal geführt. Geben Sie dort bitte ihre
+                        Benutzerdaten vom Portal ein.
+                    </li>
+                    <li>
+                        Nach erfolgreichem Anmelden werden Sie zum Gitlab zurückgeführt.
+                    </li>
+                    <li>
+                        Navigieren Sie dann zum Projekt Ihrer Wahl.
+                    </li>
+                    <li>
+                        Abhängig davon wie der Projekteigentümer das Projekt konfiguriert hat, können Sie entweder
+                        direkt loslegen, oder Sie müssen zunächst noch beim Projekteigentümer Zugang zum Projekt
+                        anfragen, indem Sie im Gitlab bei der entsprechende Projektseite auf den Link Request Access
+                        klicken.
+                    </li>
+                </ol>
+            </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>Möchten Sie selbst ein Projekt anlegen, um es der Öffentlichkeit
+                            bereitzustellen?</small></a>
+                </h3>
+            </div>
+            <div id="collapse3" class="card-body collapse">
+                <p>
+                    Vorraussetzung dazu ist, dass Sie aktives oder ehemaliges Mitglied der Hochschule für Technik sind,
+                    d.h. eine (noch) gültige HFT-Emailadresse haben, und zudem im Portal als Nutzer registriert sein.
+                </p>
+                <p>
+                    Wenn Sie noch kein Benutzerkonto haben, klicken Sie bitte oben auf den Link Benutzerkonto und folgen
+                    Sie dem System durch die Registrierungsprozedur.
+                </p>
+                <p>
+                    Haben Sie ein Benutzerkonto, befolgen Sie bitte folgende Schritte:
+                </p>
+                <ol>
+                    <li>
+                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">
+                            <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu
+                        gelangen.
+                    </li>
+                    <li>
+                        Melden Sie sich bei Gitlab an, indem Sie im Gitlab auf den Link Sign-In klicken.
+                    </li>
+                    <li>
+                        Sie werden dann auf eine Anmeldeseite von unserem Portal geführt. Geben Sie dort bitte ihre
+                        Benutzerdaten vom Portal ein.
+                    </li>
+                    <li>
+                        Nach erfolgreichem Anmelden werden Sie zum Gitlab zurückgeführt.
+                    </li>
+                    <li>
+                        Erstellen Sie dann in Gitlab ein neues Projekt durch Klicken auf den grünen New Project-Knopf
+                        und anschließendem Befolgen der Eingabemaske von Gitlab.
+                    </li>
+                </ol>
+                <p>
+                    Weitere Hilfestellung zum Anlegen von Projekten in Gitlab finden Sie in der <a
+                        href="https://docs.gitlab.com/ee/gitlab-basics/create-project.html"
+                        target="_blank">Gitlab-Dokumentation</a>.
+                </p>
+                <p>
+                    Hinweis: Um Inhalte zum Gitlab "pushen" zu können, verwendet die Gitlab-Instanz unseres Portals die
+                    s.g. "SSH Keys".
+                    Weitere Informationen dazu finden Sie in der <a
+                        href="https://transfer.hft-stuttgart.de/gitlab/help/ssh/README" target="_blank">
+                        <i class="fas fa-chevron-right">Gitlab-Dokumentation zu SSH Keys</i></a>.
+                </p>
+            </div>
+        </div>
+    </div>
+    <hr />
+    <!-- / content body -->
+</div>
\ No newline at end of file
--- a/views/ToBeDeleted/DE/project/addProjectOverview.pug
+++ b/views/ToBeDeleted/DE/project/addProjectOverview.pug
@@ -134,7 +134,7 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
-    script(src="/js/headfootLogout.js")
+    script(src="/js/headfoot.js")
    script.
        $( function() {
            $.datepicker.setDefaults( $.datepicker.regional["de"] );

--- a/views/ToBeDeleted/DE/project/mailinglists.pug
+++ b/views/ToBeDeleted/DE/project/mailinglists.pug
@@ -2,9 +2,11 @@ html(lang="de")
  head
    title= "Mailinglisten"
    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
+    meta(name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no")
    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    link(rel="stylesheet" href="/fonts/ionicons.min.css")
+    link(rel="stylesheet" href="assets/css/Testimonials.css")
    style.
        .collapse {
            display: none;
@@ -27,35 +29,71 @@ html(lang="de")
            transition-property: height,visibility;
        }
  body
-    <hr />
+    div(class="container")
-    div()
+        div(class="row")
-        h5(align="left") Aktive Mailinglisten
+            div(class="col-md-12" style="margin-bottom: 40px;")
-        div(class="flex-container" style="align-items:flex-start")
+                img(class="mx-auto" src="/img/Mailinglisten.jpg" width="100%")
-            div(class="table")
+    div(class="container")
-                table(border="0" id="listtable" class="table table-striped")
+        div(class="row")
-                    thead
+            div(class="col-md-12" style="margin-bottom: 30px;")
-                        tr
+                h4(class="text-center") Durch Mailinglisten können Sie interessierten Personen<br/> <strong>regelmäßig Informationen</strong> zu Ihrem Projekt oder Thema zukommen lassen.<br/> Ebenso können Sie über ein Abonnement in einer Mailingliste Mitglied des Verteilers<br/>werden und so <strong>im Austausch</strong> bleiben. <br/>
-                            th Name
+            div(class="col-md-12" style="margin-bottom: 30px;")
-                            th Link
+                h2(class="text-center" style="color: #708090;") <strong>Aktive Mailinglisten</strong>
-                            th zugeh. Projekt
+                div(class="table-responsive table-borderless")
-                    tbody
+                    table(class="table table-striped table-bordered table-hover")
-                        for item in mailinglists
+                        thead()
-                            if item.projectstatus == '1'
+                            tr()
-                                tr
+                                th Name
-                                    td #{item.name}
+                                th Zum Abonnement der Mailingliste
-                                    td <a href="#{item.src}">#{item.src}</a>
+                                th Zum zugehörigen Projekt
-                                    td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
+                                th Keywords
-    <hr />
+                        tbody()
-    div()
+                            for item in mailinglists
-        h5(align="left") Eintragung in Mailingliste
+                                if item.projectstatus == '1'
-        p() Wenn Sie sich in eine Mailingliste eintragen wollen, folgen Sie folgender Anleitung:
+                                    tr
+                                        td #{item.name}
+                                        td <a href="#{item.src}">#{item.src}</a>
+                                        td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
+                                        td #{item.keywords}
+    div(id="aboText" style="background-color: #dadada;margin-top: 40px;")
+        div(class="container")
+            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
+                div(class="col-lg-12" style="background-color: #ffffff;")
+                    h2(class="text-center" style="color: #708090;margin-top: 15px;") <strong> Mailingliste abonnieren </strong>
+                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+                    p() Das Deutsche Forschungsnetz (DFN) bietet Mailinglisten für Wissenschaft und Forschung an. Mailinglisten sind E-Mail-Verteilerlisten, d.h. Personen, die sich für Ihr Forschungsthema interessieren, können sich über das DFN registrieren und erhalten im Anschluss daran regelmäßig die über die Mailinglisten geteilten Informationen.
+                    p() Sie als Verteiler senden die zu versendende Mail folglich nur noch an die festgelegte Mailinglistenadresse und das Programm leitet die Nachricht an alle registrierten Personen weiter.
+                div(class="col-md-4 col-lg-6 justify-content-between flex-wrap" style="background-color: #ffffff;")
+                    div(class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);")
+                        p(class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start") Oben finden Sie eine Übersicht über die aktiven Mailinglisten. Wenn Sie sich in eine Mailingliste eintragen wollen, dann klicken Sie auf den entsprechend hinterlegten Link.
+                        p() Es öffnet sich daraufhin die Hauptseite der Liste. Nach der Auswahl des Buttons "Abonnieren", können Sie Ihre Mailadresse hinterlegen und sich in die Liste eintragen.
+                    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 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #E0001B; margin-top:10px; margin-bottom:10px;" href="/downloads/Handout_Mailinglisten_Abonnieren.pdf") <strong>Erste Schritte (Anleitung als PDF)</strong>
+                    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 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="https://www.listserv.dfn.de/sympa/help") <strong>Weitergehende Dokumentation bei DFN (externer Link)</strong>
+    div(id="newListText" style="background-color: #dadada;margin-top: 0px;")
+        div(class="container")
+            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
+                div(class="col-lg-12" style="background-color: #ffffff;")
+                    h2(class="text-center" style="color: #708090;margin-top: 15px;") <strong>Neue Mailingliste erstellen</strong>
+                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+                    p() Über das Transferportal können Sie selbst eine Liste zu Ihrem Projekt anlegen, um mit Ihren Partnern in Verbindung zu bleiben.
+                    p() Folgen Sie hierzu der Anleitung des DFN.
+                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+                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 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #E0001B; margin-top:10px; margin-top:10px;" href="/downloads/Handout_Mailinglisten_Erstellen.pdf") <strong>Erste Schritte (Anleitung als PDF)</strong>
+                a(class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto" role="button" style="background-color: #E0001B;" href="https://www.listserv.dfn.de/sympa/help/admin") <strong>Gesamtes Tutorial bei DFN (externer Link)</strong>
+    div(id="addListText" style="background-color: #dadada;margin-top: 0px;")
+        div(class="container")
+            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
+                div(class="col-lg-12" style="background-color: #ffffff;")
+                    h2(class="text-center" style="color: #708090;margin-top: 15px;") <strong>Neue Mailingliste eintragen</strong>
+                div(class="col-xl" style="background-color: #ffffff;")
+                    p() Um Ihre beim DFN angelegte Mailingliste hier aufzunehmen, schicken Sie uns bitte eine Email an <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
    // jQuery
    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
-    if isUserAuthenticated
+    script(src="/js/headfoot.js")
-        script(src="/js/headfootLogout.js")
\ No newline at end of file
-    else
-        script(src="/js/headfoot.js")
\ No newline at end of file
--- a/views/ToBeDeleted/DE/project/project-simplified.pug
+++ b/views/ToBeDeleted/DE/project/project-simplified.pug
@@ -17,7 +17,7 @@ html(lang="de")
          content: "+";
      }
      .help h3 > a {
-        color: #8a348b;
+        color: #708090;
        text-decoration: none;
        display: block;
      }
@@ -32,7 +32,10 @@ html(lang="de")
        margin-top: 0.5rem;
      }
      #infoicon {
-        color: #8a348b;
+        color: #708090;
+      }
+      .heading {
+        color: #708090;
      }
  body
    include project.html
@@ -45,8 +48,4 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
-    if isUserAuthenticated
+    script(src="/js/headfoot.js")
-        script(src="/js/headfootLogout.js")
-    else
-        script(src="/js/headfoot.js")
--- a/views/ToBeDeleted/DE/project/project.html
+++ b/views/ToBeDeleted/DE/project/project.html
-<div class="container">
-    <hr />
-    <!-- text: Zweck dieser Seite / purpose of this page -->
-    <div>
-        <i id="infoicon" class="fas fa-info-circle fa-lg"></i> 
-        Diese Seite bietet den Einstieg zu den unterschiedlichen Projekten, die in
-        unserem Portal für die Öffentlichkeit bereitgestellt werden.
-        Für diesen Zweck steht zur Zeit ein Dienst bereit: eine von der HFT selbst verwaltete Gitlab-Instanz.
-        Alle der in diesem Gitlab erfassten Projektinhalte unterliegen einer Open Source bzw. Open Data Lizenz.
-        <p class="font-italic"><b>Hinweis: </b>Die Nutzeroberfläche von GitLab ist in Englisch.</p>
-    </div>
-    <!-- link: Gitlab Projekte / Gitlab project list -->
-    <h2><small> Direkteinstieg </small></h2>
-    <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> <i class="fas fa-chevron-right">Gitlab
-            Projects</i></a>
-    <!-- text: Hilfestellung zu Gitlab / short help about Gitlab -->
-    <hr />
-    <h2><small>Hilfestellung zu GitLab</small></h2>
-    <br />
-    <div class="help">
-        <div class="card">
-            <div class="card-header">
-                <h3 class="card-title">
-                    <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
-                        <small>Möchten Sie die Projektinhalte ansehen oder herunterladen?</small></a>
-                </h3>
-            </div>
-            <div id="collapse1" class="card-body collapse">
-                <p>
-                    Dann klicken Sie auf diesen
-                    <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>
-                    die Liste aller im Gitlab erfassten Projekte zu sehen. Vor dort können Sie dann auf die einzelnen Projekte zugreifen. 
-                    Ein Anmelden am Portal ist dazu nicht nötig.
-                </p>
-            </div>
-        </div>
-        <br />
-        <div class="card">
-            <div class="card-header">
-                <h3 class="card-title">
-                    <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
-                    <small>Möchten Sie zu einem Projekt beitragen?</small></a>
-                </h3>
-            </div>
-            <div id="collapse2" class="card-body collapse">
-                <p>
-                    Wenn Sie dem Projekteigentümer eine Rückmeldung bzw. einen Fehler melden wollen, navigieren Sie im Gitlab zunächst zum entsprechenden Projekt.
-                    Anschließend können Sie dann dort die Möglichkeit nutzen, ein neues "Issues" einzureichen.
-                    Ein Anmelden am Portal ist dazu nicht nötig.
-                </p>
-                <p>
-                    Wenn Sie darüberhinaus beitragen wollen, befolgen Sie bitte folgende Schritte:
-                </p>
-                <ol>
-                    <li>
-                        Melden Sie sich bitte im Portal an. 
-                        <br />
-                        Sofern Sie noch nicht als Nutzer im Portal eingetragen sind, wird das System Sie durch die Registrierung leiten. 
-                        <br />
-                        Zur Anmeldung bzw. Registrierung gelangen Sie entweder über das Menü am oberen Seitenrand oder durch Klicken auf diesen
-                        <a href="https://m4lab.hft-stuttgart.de/account/"> <i class="fas fa-chevron-right">Link zum Benutzerkonto</i></a>.
-                    </li>
-                    <li>
-                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> 
-                            <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu gelangen.
-                    </li>
-                    <li>
-                        Fragen Sie beim Projekteigentümer um Zugang, indem Sie im Gitlab bei der entsprechende
-                        Projektseite auf den
-                        Link <em>Request Access</em> klicken. Solbald dieser ihre Anfrage bestätigt hat, können
-                        Sie loslegen.
-                    </li>
-                </ol>
-            </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>Möchten Sie selbst ein Projekt anlegen, um es der Öffentlichkeit bereitzustellen?</small></a>
-                </h3>
-            </div>
-            <div id="collapse3" class="card-body collapse">
-                <p>
-                    Vorraussetzung dazu ist, dass Sie aktives oder ehemaliges Mitglied der Hochschule für Technik sind,
-                    d.h. eine (noch) gültige HFT-Emailadresse haben. Dann befolgen Sie bitte folgende Schritte:
-                </p>
-                <ol>
-                    <li>
-                        <p>
-                            Melden Sie sich bitte im Portal an. 
-                            <br />
-                            Sofern Sie noch nicht als Nutzer im Portal eingetragen sind, wird das System Sie durch die Registrierung leiten. 
-                            <br />
-                            Zur Anmeldung bzw. Registrierung gelangen Sie entweder über das Menü am oberen Seitenrand oder durch Klicken auf diesen 
-                            <a href="https://m4lab.hft-stuttgart.de/account/"> <i class="fas fa-chevron-right">Link zum Benutzerkonto</i></a>.
-                        </p>
-                    </li>
-                    <li>
-                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> 
-                            <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu gelangen.
-                    </li>
-                    <li>
-                        Erstellen Sie dann in Gitlab ein neues Projekt durch Klicken auf den grünen <em>New Project</em>-Knopf und
-                        anschließendem Befolgen der Eingabemaske von Gitlab. 
-                        <br />
-                        Weitere Hilfestellung zum Anlegen von Projekten in Gitlab finden Sie in der 
-                        <a href="https://docs.gitlab.com/ee/gitlab-basics/create-project.html"> <i class="fas fa-chevron-right">Gitlab-Dokumentation</i></a>.
-                    </li>
-                </ol>
-            </div>
-        </div>
-    </div>
-    <hr />
-    <!-- / content body -->
-</div>
\ No newline at end of file
--- a/views/ToBeDeleted/DE/project/projectOverview.pug
+++ b/views/ToBeDeleted/DE/project/projectOverview.pug
@@ -141,20 +141,21 @@ html(lang="de")
                            br
                            span !{project.further_details}
-                    div(class="Downloads" style="height:200px;")
+                    if project.pname == 'M4LAB'
-                        h5 Downloads
+                        div(class="Downloads" style="height:200px;")
-                        p
+                            h5 Downloads
-                            i(class="fas fa-file-download")
+                            p
-                            a(href="./images/M4_LAB_Projekt/transferstrategie.pdf" download target="_blank") Transferstrategie der HfT Stuttgart
+                                i(class="fas fa-file-download")
+                                a(href="./images/M4_LAB_Projekt/transferstrategie.pdf" download target="_blank") Transferstrategie der HfT Stuttgart
-                    div(class="Projektlogos")
+                        div(class="Projektlogos")
-                        img(src="./images/M4_LAB_Projekt/WRS_Logo.jpg" width="32%")
+                            img(src="./images/M4_LAB_Projekt/WRS_Logo.jpg" width="32%")
-                        img(src="./images/M4_LAB_Projekt/IBA2027_Logo.jpg" width="32%")
+                            img(src="./images/M4_LAB_Projekt/IBA2027_Logo.jpg" width="32%")
-                        img(src="./images/M4_LAB_Projekt/GWK_Logo.jpg" width="32%")
+                            img(src="./images/M4_LAB_Projekt/GWK_Logo.jpg" width="32%")
-                        br
+                            br
-                        br
+                            br
-                        img(src="./images/M4_LAB_Projekt/bbf_logo.png" width="32%")
+                            img(src="./images/M4_LAB_Projekt/bbf_logo.png" width="32%")
-                        img(src="./images/M4_LAB_Projekt/ihs_logo.jpg" width="32%")
+                            img(src="./images/M4_LAB_Projekt/ihs_logo.jpg" width="32%")
    //jQuery
    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
@@ -162,7 +163,4 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
-    if isUserAuthenticated
+    script(src="/js/headfoot.js")
-        script(src="/js/headfootLogout.js")
\ No newline at end of file
-    else
-        script(src="/js/headfoot.js")
\ No newline at end of file
--- a/views/ToBeDeleted/DE/project/projects.pug
+++ b/views/ToBeDeleted/DE/project/projects.pug
@@ -111,7 +111,4 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
-    if isUserAuthenticated
+    script(src="/js/headfoot.js")
-        script(src="/js/headfootLogout.js")
\ No newline at end of file
-    else
-        script(src="/js/headfoot.js")
\ No newline at end of file
--- a/views/ToBeDeleted/DE/project/videoconferences.pug
+++ b/views/ToBeDeleted/DE/project/videoconferences.pug
@@ -64,7 +64,4 @@ html(lang="de")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
-    if isUserAuthenticated
+    script(src="/js/headfoot.js")
-        script(src="/js/headfootLogout.js")
\ No newline at end of file
-    else
-        script(src="/js/headfoot.js")
\ No newline at end of file