doctype html html(lang="de") head title= "Projektinformationen" 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="/css/bootstrap.min.css") link(rel="stylesheet", type="text/css", href="/css/m4lab.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. .title-container { position: relative; color: white; } .card-title-bottom-left { position: absolute; bottom: 0px; width: 100%; color: black; font-weight: bold; background: rgb(255, 255, 255, 0.5); text-align: left; padding: 5px } .card-img-top { height: 15vw; object-fit: cover; } body div(class="container") div(class="row") div(class="col-md-12 margin_bottom_40") img(class="mx-auto" src="/img/Projektinformationen.png" width="100%") div(class="container") div(class="pt-4 pb-4 form-row") div(class="form-group col-md-10") input(id="searchInput", class="form-control", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()") div(class="form-group col-md-2") select(class="form-control") option uncategorized p Hier finden Sie Informationen zu den bei uns gehosteten Projekten, wie z.B. Projektbeschreibungen, Projektwebseiten, Visualisierungen, Demonstrationen. p Für eine Übersicht über den bei uns gehosteten Projektcode und andere Projektdaten klicken Sie hier . div(class="container") p#pagesCounter #{pages.length} Projektinformationen werden angezeigt |
for item in pages div(class="card-deck py-4 col-sm") div(class="card width_18") div(class="title-container") h5(class="card-title-bottom-left") #{item.name} img(class="card-img-top", src=item.logo) div(class="card-body") div(class="row") each key in item.keywords h6 span(class="badge badge-pill badge-primary px-2") #{key} |   div(class="row") div(class="col-9") p(class="card-text") #{item.desc} a(href=item.weburl, class="no_text_decoration", target="_blank") div(class="col-3") svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="black", xmlns="http://www.w3.org/2000/svg") | |
// 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 script(src="/js/headfoot.js") script. function searchFunction() { var input = document.getElementById("searchInput") var filter = input.value.toUpperCase() var cardsCol = document.getElementsByClassName("col-sm") var cardTitle, cardText, titleValue, textValue var i var counterBlock = 0 for (i = 0; i < cardsCol.length; i++) { cardTitle = cardsCol[i].getElementsByClassName("card-title-bottom-left"); cardBody = cardsCol[i].getElementsByClassName("card-body"); cardText = cardsCol[i].getElementsByClassName("card-text"); titleValue = cardTitle[0].textContent || cardTitle[0].innerText; bodyValue = cardBody[0].textContent || cardBody[0].innerText; textValue = cardText[0].textContent || cardText[0].innerText; if (titleValue.toUpperCase().indexOf(filter) > -1 || bodyValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) { cardsCol[i].style.display = "block" counterBlock++ } else { cardsCol[i].style.display = "none" } } document.getElementById("pagesCounter").innerHTML = counterBlock+" Projektinformationen werden angezeigt" }