first commit

.gitignore

+/node_modules
+sp-project-metadata.xml

app.js

+const express = require('express')
+const fileUpload = require('express-fileupload')
+const morgan = require('morgan')
+const cookieParser = require('cookie-parser')
+const bodyParser = require('body-parser')
+const session = require('express-session')
+const flash = require('express-flash')
+const path = require('path')
+const passport = require('passport')
+
+var env = process.env.NODE_ENV || 'development'
+const config = require('./config/config')[env]
+
+var app = express()
+
+app.set('port', config.app.port)
+app.set('views', __dirname + '/views')
+app.set('view engine', 'pug')
+
+// enable files upload
+app.use(fileUpload({
+    createParentPath: true,
+    limits: { 
+      fileSize: 1000000 // 1 MB max. file size
+    }
+}))
+  
+app.use(morgan('combined'))
+app.use(cookieParser())
+app.use(bodyParser.json())
+app.use(bodyParser.urlencoded({extended: false}))
+app.use(express.static(path.join(__dirname, 'public')))
+app.use(session(
+    {
+        resave: true,
+        saveUninitialized: true,
+        secret: 'thisisasecret-thisisasecret-thisisasecret'
+    }
+))
+
+app.use(flash())
+app.use((req, res, next) => {
+    res.locals.errors = req.flash("error")
+    res.locals.successes = req.flash("success")
+    next()
+})
+
+app.use(passport.initialize())
+app.use(passport.session())
+  
+// caching disabled for every route
+// NOTE: Works in Firefox and Opera. Does not work in Edge
+app.use(function(req, res, next) {
+    res.set('Cache-Control', 'no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0')
+    next()
+})
+  
+//require('./routes/routes-account')(app, config, passport, i18n);
+require('./routes/routes-project')(app, config, passport)
+  
+// Handle 404
+app.use(function (req, res, next) {
+    //res.status(404).send('404: Page not Found', 404)
+    res.status(404).render('./DE/404')
+})
+  
+// Handle 500 - any server error
+app.use(function (err, req, res, next) {
+    console.error(err.stack)
+    res.status(500).render('./DE/500', {
+      error: err
+    })
+})
+  
+app.listen(app.get('port'), function () {
+    console.log('Project Page listening on port ' + app.get('port'))
+    console.log(__dirname)
+})
\ No newline at end of file

config/config.js

+module.exports = {
+  development: {
+    app: {
+      name: 'Project Page Manager',
+      port: process.env.PORT || 8888
+    },
+    passport: {
+      strategy: 'saml',
+      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-project.m4lab.hft-stuttgart.de', //local metadata
+        //issuer: 'sp-project-testing.m4lab.hft-stuttgart.de', //testing metadata
+        //issuer: 'sp-project-prod.m4lab.hft-stuttgart.de', //production metadata
+        logoutUrl: 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SingleLogoutService.php'
+      }
+    },
+    database: {
+      //host: 'transfer.hft-stuttgart.de',      	  // DB host
+      user: 'DBManager',          // DB username
+      password: 'Stuttgart2019',  // DB password
+      port: 3306,                 // MySQL port
+      dbUser: 'userdb',           // User DB
+      //host_project: 'm4lab.hft-stuttgart.de', // DB host project db
+      host_project: 'localhost', // local
+      dbProject: 'projectDB'     // Project DB
+    },
+    mailer: {
+      host: 'mail.hft-stuttgart.de',  // hostname
+      secureConnection: false,        // TLS requires secureConnection to be false
+      port: 587,                      // port for secure SMTP
+      authUser: 'ad\\support-transfer',
+      authPass: '6laumri2',
+      tlsCiphers: 'SSLv3',
+      from: 'support-transfer@hft-stuttgart.de',
+    }
+  },
+  test: {
+    // to be defined
+  },
+  production: {
+    // to be defined
+  }
+}

package.json

+{
+  "name": "project-page",
+  "version": "1.0.0",
+  "description": "To manage Projects' CRUD",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://transfer.hft-stuttgart.de/gitlab/m4lab_tv1/project-page.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "async": "^3.2.0",
+    "body-parser": "^1.19.0",
+    "cookie-parser": "^1.4.5",
+    "express": "^4.17.1",
+    "express-fileupload": "^1.1.7-alpha.1",
+    "express-flash": "0.0.2",
+    "express-session": "^1.17.0",
+    "morgan": "^1.10.0",
+    "mysql": "^2.18.1",
+    "nodemon": "^2.0.2",
+    "passport": "^0.4.1",
+    "path": "^0.12.7",
+    "pug": "^2.0.4"
+  }
+}

public/js/jquery-ui/i18n/datepicker-de.js

+/* German initialisation for the jQuery UI date picker plugin. */
+/* Written by Milian Wolff (mail@milianw.de). */
+( function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define( [ "../widgets/datepicker" ], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery.datepicker );
+	}
+}( function( datepicker ) {
+
+datepicker.regional.de = {
+	closeText: "Schließen",
+	prevText: "<Zurück",
+	nextText: "Vor>",
+	currentText: "Heute",
+	monthNames: [ "Januar","Februar","März","April","Mai","Juni",
+	"Juli","August","September","Oktober","November","Dezember" ],
+	monthNamesShort: [ "Jan","Feb","Mär","Apr","Mai","Jun",
+	"Jul","Aug","Sep","Okt","Nov","Dez" ],
+	dayNames: [ "Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag" ],
+	dayNamesShort: [ "So","Mo","Di","Mi","Do","Fr","Sa" ],
+	dayNamesMin: [ "So","Mo","Di","Mi","Do","Fr","Sa" ],
+	weekHeader: "KW",
+	dateFormat: "dd.mm.yy",
+	firstDay: 1,
+	isRTL: false,
+	showMonthAfterYear: false,
+	yearSuffix: "" };
+datepicker.setDefaults( datepicker.regional.de );
+
+return datepicker.regional.de;
+
+} ) );
\ No newline at end of file

routes/dbconn.js

+const mysql = require('mysql')
+
+var env = process.env.NODE_ENV || 'development';
+const config = require('../config/config')[env]
+
+// ==== USER ACOOUNT DB CONNECTION ====
+var userConnection = mysql.createConnection({
+    host: config.database.host,
+    user: config.database.user,
+    password: config.database.password,
+    port: config.database.port,
+    database: config.database.dbUser,
+    multipleStatements: true
+})
+
+userConnection.connect(function(err) {
+    if (err) throw err;
+})
+userConnection.query('USE '+config.database.dbUser)
+    
+// user db connection test
+userConnection.query('SELECT 1 + 5 AS solution', function (err, rows, fields) {
+    if (err) throw err
+    console.log('Solution = ', rows[0].solution)
+})
+//userConnection.end()
+
+// ==== PROJECT DB CONNECTION ====
+var projectConnection = mysql.createConnection({
+    host: config.database.host_project,
+    user: config.database.user,
+    password: config.database.password,
+    port: config.database.port,
+    database: config.database.dbProject
+})
+
+projectConnection.connect(function(err) {
+    if (err) throw err;
+})
+projectConnection.query('USE '+config.database.dbProject)
+    
+// projectdb connection test
+projectConnection.query('SELECT 10 + 5 AS project', function (err, rows, fields) {
+    if (err) throw err
+    console.log('Project = ', rows[0].project)
+})
+//projectConnection.end()
+
+var connection = {
+    user: userConnection,
+    project: projectConnection
+}
+
+module.exports = connection
\ No newline at end of file

routes/helpers.js

+var helpers = {
+    stringToArray: function (input){
+        if(input != null){
+            return input.split(',');
+        }else{
+            return null;
+        }
+    }
+};
+
+module.exports = helpers;
\ No newline at end of file

routes/mailer.js

+const nodemailer = require('nodemailer')
+
+var env = process.env.NODE_ENV || 'development';
+const config = require('../config/config')[env]
+
+var smtpTransport = nodemailer.createTransport({
+    host: config.mailer.host,
+    secureConnection: config.mailer.secureConnection,
+    port: config.mailer.port,
+    auth: {
+      user: config.mailer.authUser,
+      pass: config.mailer.authPass
+    },
+    tls: {
+        ciphers: config.mailer.tlsCiphers
+    } 
+});
+  
+var mailOptions = {
+    to: "",
+    from: config.mailer.from,
+    subject: "",
+    text: ""
+};
+
+var mailer = {
+    transport: smtpTransport,
+    options: mailOptions
+}
+
+module.exports = mailer
\ No newline at end of file

routes/methods.js

+const dbconn = require('./dbconn');
+
+var methods = {
+    // test method
+	currentDate: function() {
+		console.log('Current Date is: ' + new Date().toISOString().slice(0, 10));
+    },
+    // ===================== user db =====================
+    /*
+    getUserByEmail: function(email, callback) {
+        dbconn.user.query('SELECT salutation, title, firstname, lastname, industry, organisation, speciality FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
+            if (err) {
+                throw err;
+            }
+            else {
+                if ( rows.length > 0) {
+                    user = rows[0];
+                }
+            }
+            callback(user, err);
+        });
+    },
+	checkUserEmail: function(email, callback) {
+        var user;
+        dbconn.user.query('SELECT id, email FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
+            if (err) {
+                throw err;
+            }
+            else {
+                if ( rows.length > 0) {
+                    user = rows[0];
+                }
+            }
+            callback(err, user);
+        });
+    },
+    getUserIdByEmail: function(email, callback) {
+        var userId
+        dbconn.user.query('SELECT id FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
+            if (err) {
+                throw err;
+            }
+            else {
+                if ( rows.length > 0) {
+                    userId = rows[0].id;
+                }
+            }
+            callback(userId, err);
+        });
+    },
+    getUserProjectRole: function(userId, callback) {
+        dbconn.user.query('SELECT project_id, role_id FROM user_project_role WHERE user_id = "' +userId+'"', function (err, rows, fields) {
+            if (err) throw err;
+            callback(rows, err);
+        });
+    },
+    addUserProjectRole: function(data, callback) {
+        dbconn.user.query('INSERT INTO user_project_role SET ?', data, function (err, results, fields){
+            if (err) throw err;
+            callback(err);
+        })
+    },
+    */
+    // ======================= project db =======================
+    getAllProjects: function(callback) {
+        dbconn.project.query('CALL getAllprojects', function (err, rows, fields){
+            if (err) throw err;
+            callback(rows[0], err);
+        })
+    },
+    getAllMailinglists: function(callback) {
+        dbconn.project.query('CALL getAllLists', function (err, rows, fields){
+            if (err) throw err;
+            callback(rows[0], err);
+	    })
+    },
+    getProjectOverviewById: function(projectId, callback) {
+        dbconn.project.query('CALL GetProjectInformationByProjectID(' + projectId+ ')', function (err, rows, fields){
+            if (err) throw err;
+            callback(rows[0], err);
+    	})
+    },
+    getProjectImagesById: function(projectId, callback) {
+        dbconn.project.query('CALL getImagesByProjectID(' + projectId+ ')', function (err, rows, fields){
+            if (err) throw err;
+            callback(rows[0], err);
+        })
+    },
+    addProjectOverview: function(data, callback) {
+        dbconn.project.query('INSERT INTO project_overview SET ?', data, function (err, results, fields){
+            if (err) {
+                console.error(err);
+            }
+            callback(results, err);
+        })
+    }
+};
+
+module.exports = methods;
\ No newline at end of file

routes/routes-project.js

+const methods = require('./methods')
+const async = require('async')
+const helpers = require('./helpers')
+
+const pictSizeLimit = 1000000 // 1 MB
+
+module.exports = function (app) {
+ 
+  // ======== APP ROUTES - PROJECT ====================
+  var lang = 'DE'
+
+  app.get('/', function(req, res){
+    res.redirect('/project');
+  })
+
+  app.get('/mailinglists', function (req, res) {
+    async.waterfall([
+        function(done) {
+            methods.getAllMailinglists(function(mailinglistOverview, err) {
+                if (!err) {
+                    done(err, mailinglistOverview)
+                }
+            })
+        },
+        // create JSON object of mailinglists for front-end
+        function(mailinglistOverview, done) {
+            var allMailingLists = []  // JSON object
+            for (let i = 0; i < mailinglistOverview.length; i++) {
+                // add data to JSON object
+                allMailingLists.push({
+                    id: mailinglistOverview[i].id,
+                    name: mailinglistOverview[i].name,
+                    src: mailinglistOverview[i].src,
+                    projectstatus: mailinglistOverview[i].projectstatus,
+                    project_title: mailinglistOverview[i].project_title
+                });
+            }
+
+            res.render(lang+'/project/mailinglists', {
+                isUserAuthenticated: req.isAuthenticated(),
+                user: req.user,
+                mailinglists: allMailingLists
+            });
+        }
+    ])
+  });
+
+  app.get('/project', function (req, res) {
+    async.waterfall([
+      // get all projects from projectdb
+      function(done) {
+        methods.getAllProjects(function(projectsOverview, err) {
+          if (!err) {
+            done(err, projectsOverview)
+          }
+        })
+      },
+      // create JSON object for front-end
+      function(projectsOverview, done) {
+        var activeProjects = []
+        var nonActiveProjects = []
+
+        for (var i = 0; i < projectsOverview.length; i++) {
+          var project = {
+            id: projectsOverview[i].id,
+            logo: projectsOverview[i].logo,
+            akronym: projectsOverview[i].pname,
+            title: projectsOverview[i].title,
+            summary: projectsOverview[i].onelinesummary,
+            category: projectsOverview[i].category,
+            cp: projectsOverview[i].contact_email,
+            gitlab: projectsOverview[i].gitlab
+          }
+          if (projectsOverview[i].projectstatus == 0) {
+            nonActiveProjects.push(project)
+          }
+          else if (projectsOverview[i].projectstatus == 1) {
+            activeProjects.push(project)
+          }
+        }
+
+        // render the page
+        if (req.isAuthenticated()) {
+          res.render(lang+'/project/projects', {
+            isUserAuthenticated: true,
+            nonActive: nonActiveProjects,
+            active: activeProjects
+          });
+        }
+        else {
+          res.render(lang+'/project/projects', {
+            isUserAuthenticated: false,
+            nonActive: nonActiveProjects,
+            active: activeProjects
+          });
+        }
+      }
+    ])
+  })
+
+  app.get('/project_', function (req, res) {
+    res.render(lang+'/project/project-simplified', {
+       isUserAuthenticated: req.isAuthenticated(),
+       user: req.user
+    });
+  })
+
+  app.get('/addprojectoverview', function (req, res) {
+    if (req.isAuthenticated()) {
+      res.render(lang+'/project/addProjectOverview')
+    }
+    else {
+      res.redirect('/login')
+    }
+  })
+  
+  app.post('/addprojectoverview__', function (req, res) {
+    if (req.isAuthenticated()) {
+      var wiki = 0
+      if (req.body.wiki)
+        wiki = 1
+
+      var projectTerm = req.body.termForm + " - " + req.body.termTo
+      var projectOverviewData = {
+        pname: req.body.pname,
+        title: req.body.title,
+        onelinesummary: req.body.summary,
+        category: req.body.category,
+        logo: req.body.logo,
+        gitlab: req.body.gitlabURL,
+        wiki: wiki,
+        overview: req.body.overview,
+        question: req.body.question,
+        approach: req.body.approach,
+        result: req.body.result,
+        keywords: req.body.keywords,
+        announcement: req.body.announcement,
+        term: projectTerm,
+        further_details: req.body.furtherDetails,
+        website: req.body.website,
+        src: req.body.src,
+        caption: req.body.caption,
+        contact_lastname: req.body.contactName,
+        contact_email: req.body.contactEmail,
+        leader_lastname: req.body.leaderName,
+        leader_email: req.body.leaderEmail
+      }
+      
+      methods.addProjectOverview(projectOverviewData, function(err){
+        if (err) {
+          //req.flash('error', "Failed")
+          req.flash('error', "Fehlgeschlagen")
+          res.redirect('/addProjectOverview');
+        }
+        else {
+          req.flash('success', 'Your project has been created.')
+          res.redirect('/project');
+        }
+      })
+    }
+  })
+
+  app.post('/addprojectoverview', function (req, res) {
+    if (req.isAuthenticated()) {
+      var wiki = 0
+      if (req.body.wiki)
+        wiki = 1
+
+      var projectLogo = req.files.logo
+      var projectPicture = req.files.src
+      var projectLogoPath, projectPicturePath
+      
+      if (projectLogo) {
+        // raise error if size limit is exceeded
+        if (projectLogo.size === pictSizeLimit) {
+          req.flash('error', 'Projektlogo exceeds 1 MB');
+          res.redirect('/addprojectoverview');
+        }
+        else {
+          // TEST PATH FOR DEVELOPMENT (LOCALHOST)
+          projectLogoPath = './folder-in-server-to-save-projektlogo/'+req.body.pname+'/'+projectLogo.name
+          // PATH FOR TEST/LIVE SERVER
+          // var projectLogoPath = to-be-defined
+        }
+      }
+      if (projectPicture) {
+        // raise error if size limit is exceeded
+        if (projectPicture.size === pictSizeLimit) {
+          req.flash('error', 'Projektbild exceeds 1 MB');
+          res.redirect('/addprojectoverview');
+        }
+        else {
+          // TEST PATH FOR DEVELOPMENT (LOCALHOST)
+          projectPicturePath = './folder-in-server-to-save-projektbild/'+req.body.pname+'/'+projectPicture.name
+          // PATH FOR TEST/LIVE SERVER
+          // var projectPicturePath = to-be-defined
+        }
+        
+      }
+      
+      var projectTerm = req.body.termForm + " - " + req.body.termTo
+      var projectOverviewData = {
+        pname: req.body.pname,
+        title: req.body.title,
+        onelinesummary: req.body.summary,
+        category: req.body.category,
+        logo: projectLogoPath,
+        gitlab: req.body.gitlabURL,
+        wiki: wiki,
+        overview: req.body.overview,
+        question: req.body.question,
+        approach: req.body.approach,
+        result: req.body.result,
+        keywords: req.body.keywords,
+        announcement: req.body.announcement,
+        term: projectTerm,
+        further_details: req.body.furtherDetails,
+        website: req.body.website,
+        src: projectPicturePath,
+        caption: req.body.caption,
+        contact_lastname: req.body.contactName,
+        contact_email: req.body.contactEmail,
+        leader_lastname: req.body.leaderName,
+        leader_email: req.body.leaderEmail
+      }
+      
+      // save pictures
+      if (projectLogo) {
+        projectLogo.mv(projectLogoPath, function(err) {
+          if (err) {
+            console.error(err)
+            res.status(500).render(lang+'/500', {
+              error: err
+            })
+          }
+        });
+      }
+      if (projectPicture) {
+        projectPicture.mv(projectPicturePath, function(err) {
+          if (err) {
+            console.error(err)
+            res.status(500).render(lang+'/500', {
+              error: err
+            })
+          }
+        });
+      }
+
+      /* RS: Temporary solution while Project DB is still in early phase.
+              When User DB and Project DB are integrated and quite stabil, this operation should be done in 1 transaction.
+      */
+      var userId // todo: make this global variable?
+      async.waterfall([
+        // get userId by email from userdb
+        function(done) {
+          methods.getUserIdByEmail(req.user.email, function(id, err) {
+            if (!err) {
+              userId = id
+              done(err)
+            }
+          })
+        },
+        // add project overview
+        function(done) {
+          methods.addProjectOverview(projectOverviewData, function(data, err){
+            if (err) {
+              res.status(500).render(lang+'/500', {
+                error: err
+              })
+            }
+            else {
+              done(err, data.insertId)
+            }
+          })
+        },
+        // assign the created overview to logged-in user
+        function(projectOverviewId, done) {
+          var userProjectRoleData = {
+            project_id: projectOverviewId,
+            user_id: userId,
+            role_id: 3 // OVERVIEW_CREATOR
+          }
+          methods.addUserProjectRole(userProjectRoleData, function(userProjects, err) {
+            if (err) {
+              //req.flash('error', "Failed")
+              req.flash('error', "Fehlgeschlagen")
+              res.redirect('/addProjectOverview');
+            }
+            else {
+              req.flash('success', 'Your project has been created.')
+              res.redirect('/project');
+            }
+          })
+        }
+      ])
+    }
+  })
+
+  app.get('/updateprojectoverview', function (req, res) {
+    // only their own project
+  })
+
+  app.post('/updateprojectoverview', function (req, res) {
+    // only their own project
+  })
+
+  app.get('/projectoverview', function(req, res){
+    async.waterfall([
+            function(done) {
+                methods.getProjectOverviewById(req.query.projectID, function(projectOverview, err) {
+                    if (!err) {
+                        done(err, projectOverview)
+                    }
+                })
+            },
+            function(projectOverview,done){
+                methods.getProjectImagesById(req.query.projectID, function(projectImages, err) {
+                    if (!err) {
+                        done(err, projectImages, projectOverview)
+                    }
+                })
+            },
+            // render projectOverview page
+            function(projectImages, projectOverview, done) {
+
+                console.log(projectImages);
+                partnerWebsites = helpers.stringToArray(projectOverview[0].partner_website);
+                partnerNames = helpers.stringToArray(projectOverview[0].partner_name);
+                awardSites = helpers.stringToArray(projectOverview[0].award_website);
+                awardNames = helpers.stringToArray(projectOverview[0].award_name);
+                sponsorWebsites = helpers.stringToArray(projectOverview[0].sponsor_website);
+                sponsorImgs = helpers.stringToArray(projectOverview[0].sponsor_img);
+                sponsorNames = helpers.stringToArray(projectOverview[0].sponsor_name);
+
+                res.render(lang+'/project/projectOverview', {
+                    isUserAuthenticated: req.isAuthenticated(),
+                    user: req.user,
+                    projectOV: projectOverview,
+                    projectImgs: projectImages,
+                    partnerWS: partnerWebsites,
+                    partnerN: partnerNames,
+                    awardWS: awardSites,
+                    awardN: awardNames,
+                    sponsorWS: sponsorWebsites,
+                    sponsorIMG: sponsorImgs,
+                    sponsorN: sponsorNames
+                });
+            }
+        ])
+  })
+
+  app.get('/videoconferences', function(req, res){
+      res.render(lang+'/project/videoconferences', {
+              isUserAuthenticated: req.isAuthenticated(),
+              user: req.user,
+      });
+  })
+
+  app.get('/landingpage', function(req, res){
+        res.render(lang+'/project/landingpage', {
+                isUserAuthenticated: req.isAuthenticated(),
+                user: req.user,
+        });
+    })
+};
\ No newline at end of file

views/DE/404.pug

+doctype html
+html(lang="de")
+  head
+    title= "404 - Page not found"
+    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")
+    style.
+      .container { 
+        height: 400px;
+        position: relative;
+      }
+      .center {
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+  body
+    div(class="container")
+      div(class="center", align="center")
+        a(href="https://m4lab.hft-stuttgart.de")
+          img(src="https://transfer.hft-stuttgart.de/images/demo/m4lab_logo.jpg", class="img-responsive center-block", width="185", height="192")
+        br
+        br
+        p(class="h5") 404. The requested URL was not found.
+    // Bootstrap
+    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
\ No newline at end of file

views/DE/500.pug

+doctype html
+html(lang="de")
+  head
+    title= "500 - Internal Server Error"
+    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")
+    style.
+      .container { 
+        height: 400px;
+        position: relative;
+      }
+      .center {
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+  body
+    div(class="container")
+      div(class="center", align="center")
+        a(href="https://m4lab.hft-stuttgart.de")
+          img(src="https://transfer.hft-stuttgart.de/images/demo/m4lab_logo.jpg", class="img-responsive center-block", width="185", height="192")
+        br
+        br
+        p(class="h5") 500. Unexpected Error :(
+        p #{ error }
+    // Bootstrap
+    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
\ No newline at end of file

views/DE/project/addProjectOverview.pug

+doctype html
+html(lang="de")
+  head
+    title= "Add Project Overview"
+    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", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    // jQuery UI - Datepicker
+    link(rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css")
+    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 {
+            color: red;
+            font-size: 11px;
+        }
+  body
+    div(class="container-fluid")
+        div(class="row")
+            div(class="col-md-6 offset-md-2")
+                h4(class="mb-3 font-weight-bold") Neues Projekt
+            div(class="col-md-6 offset-md-3")
+                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") ×
+                form(method="POST" encType="multipart/form-data")
+                    div(class='form-row')
+                        div(class='form-group col-md-12')
+                            input#inputPname(name="title" class="form-control" type="text" placeholder="Projekttitel*" required)
+                        div(class="form-group col-md-12")
+                            input#inputTitle(name="pname" class="form-control" type="text" placeholder="Akronym*" required)
+                        div(class="form-group col-md-12")
+                            input#inputSummary(name="summary" class="form-control" type="text" placeholder="Kurzbeschreibung")
+                        div(class='form-group col-md-12')
+                            select#inputCategory(name="category", class="form-control")
+                                option(value="") - Projektkategorie -
+                                option(value="Experten-Gruppe") Experten-Gruppe
+                                option(value="Student-Projekt") Student-Projekt
+                                option(value="Lehr Projekt") Lehr Projekt
+                                option(value="Transfer-projekt") Transfer-projekt
+                        div(class="form-group col-md-12")
+                            div(class='form-group row')
+                                label(for="projectLogo" class="col-sm-3 col-form-label") Projektlogo (max. 1 MB)
+                                div(class="col-md-9")
+                                    input#inputLogo(name="logo" class="form-control" type="file")
+                        div(class="form-group col-md-12")
+                            div(class="input-group mb-3")
+                                input#inputGitlabURL(name="gitlabURL" type="text" class="form-control" placeholder="M4_LAB GitLab Project URL, z.B. https://transfer.hft-stuttgart.de/gitlab/username/projectname")
+                                div(class="input-group-prepend")
+                                    div(class="input-group-text")
+                                        input#inputWiki(name="wiki" type="checkbox")
+                                        |   Wiki
+                                
+                    h5(class="mb-3 font-weight-bold") Inhalte
+                    div(class='form-row')
+                        div(class='form-group col-md-12')
+                            textarea#inputOverview(name="overview" class="form-control" type="text" rows="5" placeholder="Projektüberblick")
+                        div(class="form-group col-md-12")
+                            textarea#inputQuestion(name="question" class="form-control" type="text" rows="5" placeholder="Fragestellung")
+                        div(class='form-group col-md-12')
+                            textarea#inputApproach(name="approach" class="form-control" type="text" rows="5" placeholder="Vorgehensweise")
+                        div(class="form-group col-md-12")
+                            textarea#inputResult(name="result" class="form-control" type="text" rows="5" placeholder="Ergebnis und Nutzung")
+                        div(class="form-group col-md-12")
+                            input#inputKeywords(name="keywords" class="form-control" type="text" placeholder="keywords")
+                    h5(class="mb-3 font-weight-bold") Projektinformationen
+                    div(class='form-row')
+                        div(class='form-group col-md-12')
+                            input#inputAnnouncement(name="announcement" class="form-control" type="text" rows="5" placeholder="Ausschreibung")
+                        div(class="form-group col-md-12")
+                            div(class='form-group row')
+                                label(for="projectLogo" class="col-sm-2 col-form-label") Laufzeit
+                                div(class="col-md-5")
+                                    input#inputTermFrom(name="termForm" class="form-control" type="text" placeholder="von (dd.mm.yyyy)")
+                                div(class="col-md-5")
+                                    input#inputTermTo(name="termTo" class="form-control" type="text" placeholder="bis (dd.mm.yyyy)")
+                        div(class='form-group col-md-12')
+                            textarea#inputFurtherDetails(name="furtherDetails" class="form-control" type="text" rows="5" placeholder="Weitere Informationen (bspw. Links zu Berichten)")
+                        div(class="form-group col-md-12")
+                            input#inputWebsite(name="website" class="form-control" type="text" placeholder="Projekt-Website")
+                    h5(class="mb-3 font-weight-bold") Bilder
+                    div(class='form-row')
+                        div(class="form-group col-md-12")
+                            div(class='form-group row')
+                                label(for="projectPicture" class="col-sm-3 col-form-label") Projektbild (max. 1 MB)
+                                div(class="col-md-9")
+                                    input#inputSrc(name="src" class="form-control" type="file")
+                        div(class="form-group col-md-12")
+                            input#inputCaption(name="caption" class="form-control" type="text" placeholder="Bildunterschrift/Bildquelle")
+                    h5(class="mb-3 font-weight-bold") Kontakt
+                    div(class='form-row')
+                        div(class="form-group col-md-2")
+                            <p class="font-weight-normal">Ansprechperson</p>
+                        div(class="form-group col-md-5")
+                            input#inputContactName(name="contactName" class="form-control" type="text" placeholder="Anrede, Titel, Vorname, Nachname")
+                        div(class="form-group col-md-5")
+                            input#inputContactEmail(name="contactEmail" class="form-control" type="email" placeholder="E-Mail-Adresse")
+                        div(class="form-group col-md-2")
+                            <p class="font-weight-normal">Projektleitung</p>
+                        div(class="form-group col-md-5")
+                            input#inputLeaderName(name="leaderName" class="form-control" type="text" placeholder="Anrede, Titel, Vorname, Nachname")
+                        div(class="form-group col-md-5")
+                            input#inputLeaderEmail(name="leaderEmail" class="form-control" type="email" placeholder="E-Mail-Adresse")
+                    p <em><small>* Pflichtfeld</small></em>
+                    input#submitBtn(type="submit", class="btn btn-outline-dark btn-block", value="Projekt Anlegen")
+
+    // 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")
+    // jQuery UI - Datepicker
+    script(src="https://code.jquery.com/ui/1.12.1/jquery-ui.js")
+    script(src="/js/jquery-ui/i18n/datepicker-de.js")
+    //script(src="i18n/datepicker-de.js")
+    // 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.
+        $( function() {
+            $.datepicker.setDefaults( $.datepicker.regional["de"] );
+            $("#inputTermFrom").datepicker();
+            $("#inputTermTo").datepicker();
+        });
\ No newline at end of file

views/DE/project/landingpage.html

+        <!-- content -->
+
+        <div class="flex-container" style="align-items:flex-start">
+
+            <div id="Textblock-startseite" class="text" style="flex-basis:600px">
+                <div style="flex-grow: 1">
+                    <p>
+                    <h1>Als innovative Hochschule wollen wir den Wandel in der Gesellschaft zukunftsfähig und verantwortungsvoll mitgestalten.</h1>
+                    <br/>
+                    <h2>Unser Ziel ist die Beantwortung gesellschaftlich relevanter Zukunftsfragen.</h2>
+
+                    Diese bearbeiten wir durch Forschungs-, Innovations- und Transferprojekte und entwickeln dabei anwendungsbezogene Lösungen.
+                    Als Impulsgeber ermöglichen wir den Transfer innovativer Ideen, indem wir Kooperationen fördern und Räume für kreativen Austausch schaffen.
+                    <br/>
+                    Dabei verknüpfen wir unsere Expertise mit Partnern innerhalb und außerhalb der Region Stuttgart. Wir informieren und involvieren Interessierte und Beteiligte durch die unterschiedlichsten Events und Formate.
+                    <br/>
+                    <h2>Willst du dabei sein?</h2>
+
+                    Dann findest du unter <span onclick="event.stopPropagation();hint_navbar('0')" ><i class="fas fa-chevron-right"></i> Informationen</span> mehr über unsere Expertise, Projekte, Publikationen und Lösungen.
+                    <br/>
+                    Erfahre mehr über unsere <span onclick="event.stopPropagation();hint_navbar('2')" ><i class="fas fa-chevron-right"></i> Events</span> und über die Möglichkeiten zur <span onclick="event.stopPropagation();hint_navbar('1')" ><i class="fas fa-chevron-right"></i> Zusammenarbeit</span>.
+                    </p>
+                </div>
+            </div>
+
+
+            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="flex-basis: 50%" style="flex-grow: 1">
+                <ol class="carousel-indicators">
+                    <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
+                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
+                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+                </ol>
+                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                    <i class="fas fa-chevron-left"></i>
+                    <!--    <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
+                    <span class="sr-only">Previous</span>
+                </a>
+                <div class="carousel-inner" role="listbox">
+                    <div class="carousel-item">
+                        <img class="d-block w-100" src="/images/3DModell_Wermelskirchen_Startseite.jpg" alt="First slide">
+                        <div id="Bildunterschrift-slide1" class="Bildunterschrift">
+                            <br>
+                            <p><a href="/projectoverview?projectID=3" ><i class="fas fa-chevron-right"></i> AG Qualität zur Definition von 3D-Stadtmodellen</a></p>&emsp;
+                        </div>
+                    </div>
+                    <div class="carousel-item active">
+                        <img class="d-block w-100" src="/images/M4_LAB_Vision.gif" alt="Second slide">
+                        <div id="Bildunterschrift-slide2" class="Bildunterschrift">
+                            <br>
+                            <p><a href="/projectoverview?projectID=1" ><i class="fas fa-chevron-right"></i> Innovationslabor M4_LAB</a></p>&emsp;
+                        </div>
+                    </div>
+                    <div class="carousel-item">
+                        <img class="d-block w-100" src="/images/SmartPollen_Projekt/SmartPollenM2GIF.gif" alt="Third slide">
+                        <div id="Bildunterschrift-slide3" class="Bildunterschrift">
+                            <br>
+                            <p><a href="/projectoverview?projectID=2" ><i class="fas fa-chevron-right"></i> Studierendenprojekt Smart-Pollen</a></p>&emsp;
+                        </div>
+                    </div>
+                </div>
+                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                    <i class="fas fa-chevron-right"></i>
+                    <!--    <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
+                    <span class="sr-only">Next</span>
+                </a>
+            </div>
+
+        </div>
\ No newline at end of file

views/DE/project/landingpage.pug

+doctype html
+html(lang="de")
+  head
+    title= "Project List"
+    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", 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 {
+            color: red;
+            font-size: 11px;
+        }
+  body
+    include landingpage.html
+
+
+    // 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/headfootLogout.js")
+    else
+        script(src="/js/headfoot.js")
\ No newline at end of file

views/DE/project/mailinglists.pug

+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")
+    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
+    <hr />
+    div()
+        h5(align="left") Aktive Mailinglisten
+        div(class="flex-container" style="align-items:flex-start")
+            div(class="table")
+                table(border="0" id="listtable" class="table table-striped")
+                    thead
+                        tr
+                            th Name
+                            th Link
+                            th zugeh. Projekt
+                    tbody
+                        for item in mailinglists
+                            if item.projectstatus == '1'
+                                tr
+                                    td #{item.name}
+                                    td <a href="#{item.src}">#{item.src}</a>
+                                    td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
+    <hr />
+    div()
+        h5(align="left") Eintragung in Mailingliste
+        p() Wenn Sie sich in eine Mailingliste eintragen wollen, folgen Sie folgender Anleitung:
+    // 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/headfootLogout.js")
+    else
+        script(src="/js/headfoot.js")
\ No newline at end of file

views/DE/project/project-simplified.pug

+doctype html
+html(lang="de")
+  head
+    title= "Project List"
+    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", 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 {
+            color: red;
+            font-size: 11px;
+        }
+  body
+    include project.html
+
+
+    // 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/headfootLogout.js")
+    else
+        script(src="/js/headfoot.js")
\ No newline at end of file

views/DE/project/project.html

+        <div class="container">
+            <hr />
+            <!-- text: Zweck dieser Seite / purpose of this page -->
+            <i class="fas fa-info-circle"></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>Hinweis: Die Nutzeroberfläche von GitLab ist in Englisch.</p>
+
+            <!-- link: Gitlab Projekte / Gitlab project list -->
+            <h2> Direkteinstieg </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> Hilfestellung zu GitLab </h2>
+
+            <h3> <i class="fas fa-question-circle"></i> Möchten Sie die Projektinhalte ansehen oder herunterladen? </h3>
+            <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>
+            
+            <h3> <i class="fas fa-question-circle"></i> Möchten Sie zu einem Projekt beitragen? </h3>	
+            <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>
+
+            <h3> <i class="fas fa-question-circle"></i> Möchten Sie selbst ein Projekt anlegen, um es der Öffentlichkeit bereitzustellen? </h3>
+            
+            </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>
+                    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>
+                    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>
+            
+            <!-- / content body -->
+        </div>
\ No newline at end of file

views/DE/project/projectOverview.pug

+doctype html
+html(lang="de")
+  head
+    title= "Project List"
+    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", 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 {
+            color: red;
+            font-size: 11px;
+        }
+  body
+    div
+        for project in projectOV
+            div(class="flex-container")
+                div(class="main")
+                    h1 #{project.title}
+                    div(style="float:right; margin-left:30px; margin-bottom:0px; width:50%;")
+                        img(src=project.src, width="100%")
+                        p(style="text-align:right") #{project.caption}
+
+                    h2 Projektüberblick
+                    p !{project.overview}
+                    br
+                    b keywords:
+                    span #{project.keywords}
+                    br
+                    h2 Fragestellung
+                    p !{project.question}
+                    p
+                    h2 Vorgehensweise
+                    p !{project.approach}
+                    br
+                    br
+                    h2 Ergebnis und Nutzung
+                    p !{project.result}
+                div(class="side")
+                    for image in projectImgs
+                        if image.pos == '2' || image.pos == '3'
+                            div(class="projectimg")
+                                <img src="#{image.src}", width="100%">
+                                if image.caption
+                                    span #{image.caption}
+                                </img>
+
+                    div(class="fakeimg")
+                        if project.leader_lastname
+                            p
+                                b Projektleitung HfT: &nbsp;
+                                <a href="mailto: #{project.leader_email}">#{project.leader_lastname}</a>
+                    div(class="fakeimg")
+                        if project.contact_lastname
+                            p
+                                b Ansprechperson: &nbsp;
+                                <a href="mailto: #{project.contact_email}">#{project.contact_lastname} </a>
+                    div(class="fakeimg")
+                        if project.announcement
+                            p
+                                b Ausschreibung: &nbsp;
+                                span !{project.announcement}
+
+                    div(class="fakeimg")
+                        if project.partner_name
+                            p
+                                b Projektpartner:
+                                br
+                                for website, i in partnerWS
+                                    if website
+                                        <a href="#{website}">#{partnerN[i]}</a>
+                                        br
+                                    else
+                                        #{partnerN[i]}
+                                        br
+
+                    div(class="fakeimg")
+                        if project.term
+                            p
+                                b Projektlaufzeit: &nbsp;
+                                span #{project.term}
+
+                    div(class="fakeimg")
+                        if project.award_name
+                            p
+                                b Preise:
+                                br
+                                for awardsite, i in awardWS
+                                    if awardsite
+                                        <a href="#{awardsite}">#{awardN[i]}</a>
+                                        br
+                                    else
+                                        #{awardN[i]}
+                                        br
+
+                    div(class="fakeimg")
+                        if project.administrator
+                            p
+                                b Projektträger: &nbsp;
+                                span #{project.administrator}
+
+                    div(class="fakeimg")
+                        if project.sponsor_name
+                            p
+                                b Geldgeber:
+                                br
+                                for website, i in sponsorWS
+                                    if website
+                                        <a href="#{website}">#{sponsorN[i]}</a>
+                                        br
+                                    else
+                                        #{sponsorN[i]}
+                                        br
+
+                    div(class="fakeimg")
+                        if project.website || project.further_details
+                        p
+                            b Mehr Informationen: &nbsp;
+                            if project.website
+                                <a href="#{project.website}">#{project.website}</a>
+                            br
+                            span !{project.further_details}
+
+                    div(class="Downloads" style="height:200px;")
+                        h5 Downloads
+                        p
+                            i(class="fas fa-file-download")
+                            a(href="./images/M4_LAB_Projekt/transferstrategie.pdf" download target="_blank") Transferstrategie der HfT Stuttgart
+
+                    div(class="Projektlogos")
+                        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/GWK_Logo.jpg" width="32%")
+                        br
+                        br
+                        img(src="./images/M4_LAB_Projekt/bbf_logo.png" 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")
+    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/headfootLogout.js")
+    else
+        script(src="/js/headfoot.js")
\ No newline at end of file