diff --git a/includes/headfoot_foot.html b/includes/headfoot_foot.html new file mode 100644 index 0000000000000000000000000000000000000000..1e93ac1ed6a2bff8136c938c72602a250e3fa4a3 --- /dev/null +++ b/includes/headfoot_foot.html @@ -0,0 +1,97 @@ +<!-- RS + HTML representation of the footer JS + !! FOR DEVELOPMENT AND TEST ONLY !! +--> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <title>Transferportal HfT Stuttgart</title> + <link rel="stylesheet" href="../css/bootstrap.min.css"> + <link rel="stylesheet" href="../css/bootstrap.css"> + <link rel="stylesheet" href="../fonts/ionicons.min.css"> + <link rel="stylesheet" href="../css/Testimonials.css"> + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> + </head> + <body> + <!-- footerdiv --> + <div id="homepage" class="last clear"> + <hr> + <!-- containerdiv --> + <div class="container-fluid"> + <!-- containerdivrow --> + <div class="row"> + <!-- hftlink --> + <a href="https://www.hft-stuttgart.de" class="col-md-3"> + <!-- hftimage --> + <img src="../images/demo/hft_logo.jpg" alt="Logo der Hochschule für Technik Stuttgart" style="height:75px;"/> + </a> + <!-- contactdiv --> + <div class="col-md-3 footer-unten"> + Hochschule für Technik Stuttgart + <!-- rowdiv --> + <div class="row"> + <!-- hft_links coldiv --> + <div class="contactrow footer-unten"> + <!-- hft_links collink --> + <a href="https://www.hft-stuttgart.de/forschung/innovative-hochschule-m4-lab" class="contact-lower"> + Kontakt + </a> + </div> + <!-- hft_links coldiv --> + <div class="contactrow footer-unten"> + <!-- hft_links collink --> + <a href="https://www.hft-stuttgart.de/impressum" class="contact-lower"> + Impressum + </a> + </div> + <!-- hft_links coldiv --> + <div class="contactrow footer-unten"> + <!-- hft_links collink --> + <a href="https://www.hft-stuttgart.de/datenschutz" class="contact-lower"> + Datenschutz + </a> + </div> + </div> + </div> + <!-- socialdiv--> + <div class="col-md-3"> + <!-- socialrow --> + <div id="socialmediabuttons"> + <!-- sociallink--> + <a href="https://twitter.com/InnolabM4"> + <!-- socialcontent --> + <i class="fab fa-twitter"></i> + </a> + <!-- sociallink--> + <a href="https://www.facebook.com/HfTStuttgart/"> + <!-- socialcontent --> + <i class="fab fa-facebook-square"></i> + </a> + <!-- sociallink--> + <a href="https://www.instagram.com/m4_lab/"> + <!-- socialcontent --> + <i class="fab fa-instagram"></i> + </a> + <!-- sociallink--> + <a href="https://de.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/"> + <!-- socialcontent --> + <i class="fab fa-linkedin"></i> + </a> + <!-- sociallink--> + <a href="https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA"> + <!-- socialcontent --> + <i class="fab fa-youtube"></i> + </a> + </div> + </div> + <!-- imagediv--> + <div class="col-md-3"> + <!-- img --> + <img src="../images/demo/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.jpg" alt="Innovative Hochschule" style="width:300px; height:73px"/> + </div> + </div> + </div> + </div> + </body> +</html> \ No newline at end of file diff --git a/includes/headfoot_head.html b/includes/headfoot_head.html new file mode 100644 index 0000000000000000000000000000000000000000..481240a9a911e19d0c7cc508a746188cc0dd37b0 --- /dev/null +++ b/includes/headfoot_head.html @@ -0,0 +1,143 @@ +<!-- RS + HTML representation of the header JS + !! FOR DEVELOPMENT AND TEST ONLY !! +--> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <title>Transferportal HfT Stuttgart</title> + <link rel="stylesheet" href="../css/bootstrap.min.css"> + <link rel="stylesheet" href="../css/bootstrap.css"> + <link rel="stylesheet" href="../fonts/ionicons.min.css"> + <link rel="stylesheet" href="../css/Testimonials.css"> + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> + </head> + + <body> + <!-- navheader --> + <header id="header" class="clear"> + <!-- alertdiv --> + <div class="alert alert-danger alert-dismissible fade show" style="text-align:center;"> + <!-- alertbutton --> + <button type="button" class="close" data-dismiss="alert"> + × + </button> + <strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use. + </div> + <!-- navbar --> + <nav class="navbar navbar-expand-md navbar-light" style="background-color: #ffffff;"> + <!-- fluiddiv --> + <div class="container-fluid navbar-header"> + <!-- link_m4lab --> + <a class="navbar-brand" href="/"> + <img src="../images/demo/m4lab_logo.jpg" alt="Logo Innovationslabor M4_LAB"> + </a> + <!-- togglebutton --> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <!-- navbardiv --> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <!-- navelements --> + <ul id="navelemente" class="navbar-nav mr-auto"> + <!-- headitem --> + <li class="nav-item dropdown"> + <!-- headlink --> + <a href="#" id="navbarDropdown0" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Informationen + </a> + <!-- combodiv --> + <div id="navbarDropdown0_par" class="dropdown-menu" aria-labelledby="navbarDropdown0"> + <!-- combolink --> + <a class="dropdown-item" href="/project"> + Projekte + </a> + <!-- combolink --> + <a class="dropdown-item" href="/projectoverview?projectID=1"> + Ãœber das M4_LAB + </a> + <!-- combolink --> + <a class="dropdown-item" href="/account/contact"> + Kontakt + </a> + </div> + </li> + <!-- headitem --> + <li class="nav-item dropdown"> + <!-- headlink --> + <a href="#" id="navbarDropdown1" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Zusammenarbeit + </a> + <!-- combodiv --> + <div id="navbarDropdown1_par" class="dropdown-menu" aria-labelledby="navbarDropdown1"> + <!-- combolink --> + <a class="dropdown-item" href="/mailinglists"> + Mailinglisten + </a> + <!-- combolink --> + <a class="dropdown-item" href="/videoconference.html"> + Videokonferenzen + </a> + <!-- combolink --> + <a class="dropdown-item" href="/#"> + ... + </a> + </div> + </li> + <!-- headitem --> + <li class="nav-item dropdown"> + <!-- headlink --> + <a href="#" id="navbarDropdown2" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Events + </a> + <!-- combodiv --> + <div id="navbarDropdown2_par" class="dropdown-menu" aria-labelledby="navbarDropdown2"> + <!-- combolink --> + <a class="dropdown-item" href="http://www.hft-stuttgart.de/Aktuell/Veranstaltungen/"> + Veranstaltungen der HfT + </a> + <!-- combolink --> + <a class="dropdown-item" href="https://www.hft-stuttgart.de/forschung/veranstaltungen"> + Veranstaltungen der HfT Forschung + </a> + </div> + </li> + <!-- headitem --> + <li class="nav-item"> + <!-- headlink --> + <a href="/account" id="navbarDropdown2" class="nav-link" role="button"> + Benutzerkonto + </a> + </li> + </ul> + </div> + </div> + </nav> + </header> + + <p> test test test test</p> + <p> test test test test 123</p> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <hr> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <hr> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <p> test test test test</p> + <hr> + + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> + + </body> +</html> \ No newline at end of file diff --git a/js/headfoot.js b/js/headfoot.js index dc8a87d3fc482a0fb5b4ecc0d25415518408b30f..5ad1aab6a3d7fce44954447be5c1fa008b59f3ca 100755 --- a/js/headfoot.js +++ b/js/headfoot.js @@ -43,37 +43,51 @@ function sendRequest(URL){ * creates header and prepends it to the documents body */ -function head(){ - let headerdiv = document.createElement('div'); - let alertdiv = document.createElement('div'); - headerdiv.classList.add("wrapper","row1"); - let navheader = document.createElement('header'); +function head() { + let navheader = document.createElement("header"); navheader.id = "header"; navheader.classList.add("clear"); - let alertbutton = document.createElement('button'); + + // disclaimer + let alertdiv = document.createElement("div"); + alertdiv.classList.add("alert", "alert-danger", "alert-dismissible", "fade", "show"); + alertdiv.style = "text-align:center;"; + alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use." + let alertbutton = document.createElement("button"); alertbutton.type = "button"; alertbutton.classList.add("close"); alertbutton.setAttribute("data-dismiss", "alert"); alertbutton.innerHTML = "×"; - alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use." prependChild(alertdiv, alertbutton); - alertdiv.classList.add('alert','alert-danger', 'alert-dismissible', 'fade','show'); - alertdiv.style = "text-align:center;"; - navheader.appendChild(alertdiv); - let navbar = document.createElement('nav'); - navbar.classList.add("navbar", "navbar-default"); - let fluiddiv = document.createElement('div'); - fluiddiv.classList.add("container-fluid"); - let navbardiv = document.createElement('div'); - navbardiv.classList.add("navbar-header"); - let navelements = document.createElement('ul'); - navelements.id="navelemente"; - let logos = document.createElement('li'); + + // navigation header + let navbar = document.createElement("nav"); + navbar.classList.add("navbar", "navbar-expand-md", "navbar-light"); + navbar.style = "background-color: #ffffff;"; + let fluiddiv = document.createElement("div"); + fluiddiv.classList.add("container-fluid", "navbar-header"); + // navigation header - logo let link_m4lab = document.createElement('a'); link_m4lab.href = "/"; - link_m4lab.innerHTML = "<img src='/images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>"; - logos.appendChild(link_m4lab); - navelements.appendChild(logos); + link_m4lab.classList.add("navbar-brand"); + link_m4lab.innerHTML = "<img src='images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>"; + // navigation header - toggle button menu for mobile devices + let togglebutton = document.createElement('button'); + togglebutton.classList.add("navbar-toggler") + togglebutton.type = "button"; + togglebutton.setAttribute("data-toggle", "collapse"); + togglebutton.setAttribute("data-target", "#navbarCollapse"); + togglebutton.setAttribute("aria-controls", "navbarCollapse"); + togglebutton.setAttribute("aria-expanded", "false"); + togglebutton.setAttribute("aria-label", "Toggle navigation"); + togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>"; + // navigation header - menu + let navbardiv = document.createElement("div"); + navbardiv.classList.add("collapse", "navbar-collapse"); + navbardiv.id = "navbarCollapse" + let navelements = document.createElement('ul'); + navelements.id="navelemente"; + navelements.classList.add("navbar-nav", "mr-auto"); for(let j = 0; j<menu.length; j++){ let headitem = document.createElement('li'); let itemtype = menu[j].type; @@ -105,34 +119,20 @@ function head(){ } headitem.appendChild(combodiv); } - headitem.appendChild(headlink); + prependChild(headitem, headlink) navelements.appendChild(headitem); } -/* let searchitem = document.createElement('li'); - searchitem.classList.add("nav-item"); - let searchinput = document.createElement('input'); - searchinput.value='Suche...' - searchinput.type="text"; - searchinput.classList.add("nav-item-suchfeld"); - searchinput.setAttribute('onFocus', "this.value=(this.value=='search...')? '' : this.value"); - searchitem.appendChild(searchinput); - let magnifier = document.createElement('input'); - magnifier.type="image" - magnifier.src="/images/Lupe_grau.png"; - magnifier.width="25"; - magnifier.height="25"; - magnifier.alt=""; - magnifier.id="sf_submit"; - magnifier.value="search"; - searchitem.appendChild(magnifier); - navelements.appendChild(searchitem);*/ navbardiv.appendChild(navelements); + + fluiddiv.appendChild(link_m4lab); + fluiddiv.appendChild(togglebutton); fluiddiv.appendChild(navbardiv); navbar.appendChild(fluiddiv); + + navheader.appendChild(alertdiv); navheader.appendChild(navbar); - headerdiv.appendChild(navheader); - prependChild(document.body, headerdiv); -}; + prependChild(document.body, navheader); +} /* function foot() * creates footer and appends it to the documents body @@ -144,20 +144,20 @@ function foot(){ footerdiv.classList.add("last", "clear"); footerdiv.innerHTML = "<hr>"; let containerdiv = document.createElement('div'); - containerdiv.classList.add('flex-container'); + containerdiv.classList.add('container-fluid'); + let containerdivrow = document.createElement('div'); + containerdivrow.classList.add('row'); let hftlink = document.createElement('a'); hftlink.classList.add("col-md-3"); - hftlink.setAttribute('style','flex-basis: 400px;'); hftlink.href="https://www.hft-stuttgart.de"; let hftimage = document.createElement('img'); - hftimage.src="/images/demo/hft_logo.jpg"; + hftimage.src="images/demo/hft_logo.jpg"; hftimage.alt="Logo der Hochschule für Technik Stuttgart"; hftimage.height= '75'; hftlink.appendChild(hftimage); - containerdiv.appendChild(hftlink); + containerdivrow.appendChild(hftlink); let contactdiv = document.createElement('div'); contactdiv.classList.add("col-md-3", "footer-unten") - contactdiv.setAttribute('style',"flex-basis:400px"); contactdiv.innerHTML="Hochschule für Technik Stuttgart"; let rowdiv = document.createElement('div'); rowdiv.classList.add("row"); @@ -172,10 +172,9 @@ function foot(){ rowdiv.appendChild(coldiv); } contactdiv.appendChild(rowdiv); - containerdiv.appendChild(contactdiv); + containerdivrow.appendChild(contactdiv); let socialdiv = document.createElement('div'); socialdiv.classList.add("col-md-3"); - socialdiv.setAttribute('style','flex-basis: 400px;'); let socialrow = document.createElement('div'); socialrow.id="socialmediabuttons"; for(let j = 0; j< socialmedias.length; j++){ @@ -188,10 +187,9 @@ function foot(){ socialrow.innerHTML+=" "; } socialdiv.appendChild(socialrow); - containerdiv.appendChild(socialdiv); + containerdivrow.appendChild(socialdiv); let imagediv = document.createElement('div'); imagediv.classList.add("col-md-3"); - imagediv.setAttribute("style", "flex-basis:400px;"); for (let k = 0; k< footer_images.length; k++){ let image = document.createElement('img'); image.src = footer_images[k].src; @@ -200,7 +198,8 @@ function foot(){ image.alt = footer_images[k].alt; imagediv.appendChild(image); } - containerdiv.appendChild(imagediv); + containerdivrow.appendChild(imagediv); + containerdiv.appendChild(containerdivrow); footerdiv.appendChild(containerdiv); document.body.appendChild(footerdiv); };