diff --git a/public/rgc_website/content/content.json b/public/rgc_website/content/content.json
new file mode 100644
index 0000000000000000000000000000000000000000..85e55b78d22d40782ccf7d271d68df16204fb261
--- /dev/null
+++ b/public/rgc_website/content/content.json
@@ -0,0 +1,72 @@
+[
+ {
+ "item": {
+ "title": "The Book of Samson",
+ "author": {
+ "firstName": "David",
+ "lastName": "Maine"
+ }
+ },
+ "refIndex": 19
+ },
+ {
+ "item": {
+ "title": "The Preservationist",
+ "author": {
+ "firstName": "David",
+ "lastName": "Maine"
+ }
+ },
+ "refIndex": 20
+ },
+ {
+ "item": {
+ "title": "Fallen",
+ "author": {
+ "firstName": "David",
+ "lastName": "Maine"
+ }
+ },
+ "refIndex": 21
+ },
+ {
+ "item": {
+ "title": "Monster 1959",
+ "author": {
+ "firstName": "David",
+ "lastName": "Maine"
+ }
+ },
+ "refIndex": 22
+ },
+ {
+ "item": {
+ "title": "The DaVinci Code",
+ "author": {
+ "firstName": "Dan",
+ "lastName": "Brown"
+ }
+ },
+ "refIndex": 6
+ },
+ {
+ "item": {
+ "title": "Angels & Demons",
+ "author": {
+ "firstName": "Dan",
+ "lastName": "Brown"
+ }
+ },
+ "refIndex": 7
+ },
+ {
+ "item": {
+ "title": "The Lost Symbol",
+ "author": {
+ "firstName": "Dan",
+ "lastName": "Brown"
+ }
+ },
+ "refIndex": 10
+ }
+]
\ No newline at end of file
diff --git a/public/rgc_website/css/language.css b/public/rgc_website/css/language.css
new file mode 100644
index 0000000000000000000000000000000000000000..b02bdc2afa5c3a4f161c4473f163b2f5c23b095f
--- /dev/null
+++ b/public/rgc_website/css/language.css
@@ -0,0 +1,3 @@
+.selectpicker{
+ cursor: pointer
+}
diff --git a/public/rgc_website/css/search.css b/public/rgc_website/css/search.css
new file mode 100644
index 0000000000000000000000000000000000000000..20b243cb8d0f023bc1901e2161ac7c5b5d9360a6
--- /dev/null
+++ b/public/rgc_website/css/search.css
@@ -0,0 +1,147 @@
+body {
+ background: #212129;
+ }
+
+ ::selection {
+ background: #212129;
+ }
+
+ .search-wrapper {
+ position: relative;
+ transform: translate(-50%, -50%);
+ top:50%;
+ left:50%;
+ float: right;
+ margin-right: 47%;
+ }
+ .search-wrapper.active {}
+
+ .search-wrapper .input-holder {
+ height: 70px;
+ width:70px;
+ overflow: hidden;
+ background: rgba(255,255,255,0);
+ border-radius:6px;
+ position: relative;
+ transition: all 0.3s ease-in-out;
+ }
+ .search-wrapper.active .input-holder {
+ width:450px;
+ border-radius: 50px;
+ background: rgba(0,0,0,0.5);
+ transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
+ }
+ .search-wrapper .input-holder .search-input {
+ width:100%;
+ height: 50px;
+ padding:0px 70px 0 20px;
+ opacity: 0;
+ position: absolute;
+ top:0px;
+ left:0px;
+ background: transparent;
+ box-sizing: border-box;
+ border:none;
+ outline:none;
+ font-family:"Open Sans", Arial, Verdana;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 20px;
+ color:#FFF;
+ transform: translate(0, 60px);
+ transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
+ transition-delay: 0.3s;
+ }
+ .search-wrapper.active .input-holder .search-input {
+ opacity: 1;
+ transform: translate(0, 10px);
+ }
+ .search-wrapper .input-holder .search-icon {
+ width:70px;
+ height:70px;
+ border:none;
+ border-radius:6px;
+ background: #FFF;
+ padding:0px;
+ outline:none;
+ position: relative;
+ z-index: 2;
+ float:right;
+ cursor: pointer;
+ transition: all 0.3s ease-in-out;
+ }
+ .search-wrapper.active .input-holder .search-icon {
+ width: 50px;
+ height:50px;
+ margin: 10px;
+ border-radius: 30px;
+ }
+ .search-wrapper .input-holder .search-icon span {
+ width:22px;
+ height:22px;
+ display: inline-block;
+ vertical-align: middle;
+ position:relative;
+ transform: rotate(45deg);
+ transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
+ }
+ .search-wrapper.active .input-holder .search-icon span {
+ transform: rotate(-45deg);
+ }
+ .search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
+ position: absolute;
+ content:'';
+ }
+ .search-wrapper .input-holder .search-icon span::before {
+ width: 4px;
+ height: 11px;
+ left: 9px;
+ top: 18px;
+ border-radius: 2px;
+ background: #FE5F55;
+ }
+ .search-wrapper .input-holder .search-icon span::after {
+ width: 20px;
+ height: 20px;
+ left: 3px;
+ top: 0px;
+ border-radius: 16px;
+ border: 4px solid #FE5F55;
+ }
+ .search-wrapper .close {
+ position: absolute;
+ z-index: 1;
+ top:24px;
+ right:20px;
+ width:25px;
+ height:25px;
+ cursor: pointer;
+ transform: rotate(-180deg);
+ transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
+ transition-delay: 0.2s;
+ }
+ .search-wrapper.active .close {
+ right:-50px;
+ transform: rotate(45deg);
+ transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
+ transition-delay: 0.5s;
+ }
+ .search-wrapper .close::before, .search-wrapper .close::after {
+ position:absolute;
+ content:'';
+ background: #FE5F55;
+ border-radius: 2px;
+ }
+ .search-wrapper .close::before {
+ width: 5px;
+ height: 25px;
+ left: 10px;
+ top: 0px;
+ }
+ .search-wrapper .close::after {
+ width: 25px;
+ height: 5px;
+ left: 0px;
+ top: 10px;
+ }
+
\ No newline at end of file
diff --git a/public/rgc_website/index.html b/public/rgc_website/index.html
index 6d1110f763e31f27198585911ae3cea07a241668..23bcf4f34551992c102696a7fea35309462296bb 100644
--- a/public/rgc_website/index.html
+++ b/public/rgc_website/index.html
@@ -12,6 +12,7 @@
<link href="css/main.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/79b3e255a2.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/png" sizes="32x32" href="./imgs/icon.png">
+
</head>
<body>
@@ -49,10 +50,14 @@
class="hftlogo" width="100px">
<h1 id='projectname'></h1>
</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
+ <select class="selectpicker" style="background-color: #cc3125; width: 8em; border-color:#cc3125;" data-width="fit">
+ <option class="selectlang" style="background-color: white;">English</option>
+ <option class="selectlang" style="background-color: white;">Deutsch</option>
+ </select>
+ <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
- </button>
+ </button> -->
</div>
</div>
</header>
@@ -70,9 +75,20 @@
<div class="album py-5 bg-light topDownPadding">
<div class="container">
- <h2><i class="fas fa-laptop-code"></i> Our Applications</h2>
-
- <p class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p>
+ <div>
+ <h2 ><i class="fas fa-laptop-code"></i> Our Applications</h2>
+ <!-- Searchbar -->
+ <!-- start -->
+ <div class="search-wrapper">
+ <div class="input-holder">
+ <input type="text" id="search-input" class="search-input" placeholder="Type to search" />
+ <button id="search-button" class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
+ </div>
+ <span class="close" onclick="searchToggle(this, event);"></span>
+ </div>
+ <!-- end -->
+ </div>
+ <p class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p><br>
<div class="row">
<div class="col-lg-4">
@@ -428,13 +444,26 @@
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div>
</footer>
-
-
+ <!-- Test -->
+ <!-- /////////////////////////////////////// -->
+ <!-- Language selector -->
+ <!-- full jquery needed -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
+ <script src="js/language.js"></script>
+ <!-- search library -->
+ <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
+ <link rel="stylesheet" href="./css/search.css">
+ <link rel="stylesheet" href="./css/language.css">
+ <script src="js/search.js"></script>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<!-- <script src="settings.js"> </script> -->
- <script src="./js/jquery.slim.min.js"></script>
+ <!-- <script src="./js/jquery.slim.min.js"></script> -->
<script src="./js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
+
</body>
</html>
\ No newline at end of file
diff --git a/public/rgc_website/js/language.js b/public/rgc_website/js/language.js
new file mode 100644
index 0000000000000000000000000000000000000000..03d69019f1d7c0244dfbea44d70a1f0ceda57381
--- /dev/null
+++ b/public/rgc_website/js/language.js
@@ -0,0 +1,4 @@
+// placeholder for real language selection
+$('.selectpicker').change(function(){
+ alert($(this).val());
+})
\ No newline at end of file
diff --git a/public/rgc_website/js/search.js b/public/rgc_website/js/search.js
new file mode 100644
index 0000000000000000000000000000000000000000..b46a6b324b65ce8d4ffd7bb315e3c47d97e7c084
--- /dev/null
+++ b/public/rgc_website/js/search.js
@@ -0,0 +1,57 @@
+// search options
+// --- needs to be adapted to the form of our content
+const options = {
+ includeScore: true,
+ // Search in `author` and in `tags` array
+ keys: ["item.title",
+ "item.author.firstName", "item.author.lastName"]
+}
+
+// start search
+var searchanswer
+function search(){
+ const fuse = new Fuse(stuff, options);
+ searchanswer = fuse.search(document.getElementById("search-input").value)
+
+ alert(searchanswer);
+}
+
+//get json
+// --- can be adapted if we load the content from the json
+var stuff = []
+$(document).ready(function(){
+ $.getJSON("./content/content.json", function(result){
+ stuff = result;
+ });
+});
+
+
+// searchbar and start search
+function searchToggle(obj, evt){
+ console.log("arrive")
+ var container = $(obj).closest('.search-wrapper');
+ if(!container.hasClass('active')){
+ container.addClass('active');
+ evt.preventDefault();
+ console.log("first")
+ }
+ else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
+ container.removeClass('active');
+ // clear input
+ console.log("second")
+ container.find('.search-input').val('');
+ } else {
+ console.log("search")
+ search();
+ }
+}
+
+// search on enter
+var input = document.getElementById("search-input");
+input.addEventListener("keyup", function(event) {
+ if (event.keyCode === 13) {
+ event.preventDefault();
+
+ document.getElementById("search-button").click();
+ }
+});
\ No newline at end of file