diff --git a/Frontend/assets/css/frame.css b/Frontend/assets/css/frame.css
index 1534b8a..e1d622d 100644
--- a/Frontend/assets/css/frame.css
+++ b/Frontend/assets/css/frame.css
@@ -27,6 +27,9 @@ div#header {
background-color: #FFFFFF;
width: 100%;
height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
#logo {
@@ -47,7 +50,7 @@ div#content {
backdrop-filter: blur(10px);
}
-div#toolList {
+div#leftBar {
float: left;
width: 200px;
background-color: transparent;
@@ -71,7 +74,7 @@ div#copyright a, a:visited, a:active {
color: rgb(192, 192, 192);
}
-ul#toolList {
+#toolList {
list-style-type: none;
margin: 0;
padding: 10px 0 0 0;
@@ -99,14 +102,41 @@ ul#toolList {
transition-duration: .3s;
}
+#leftElements {
+ display: flex;
+ align-items: center;
+}
+
#titlebar {
- display: block;
- padding: 10px 0;
+ /* padding: 10px 0; */
color: black;
-
- margin-top: -78px;
-
+ height: fit-content;
+ margin: 0px 20px;
font-size: 36px;
text-align: center;
+}
+#menu {
+ display: flex;
+ height: fit-content;
+
+}
+
+#menu a {
+ display: block;
+ margin: 0px 10px;
+ padding: 0px 10px;
+ font-size: 28px;
+ text-decoration: none;
+ color: black;
+}
+
+#menu a.active {
+ border-bottom: 3px solid #2A93B0;
+
+}
+
+#menu a:hover {
+ transform: scale(1.25, 1.25);
+ transition-duration: .3s;
}
\ No newline at end of file
diff --git a/Frontend/assets/scripts/dyn_host.js b/Frontend/assets/scripts/dyn_host.js
index 0a1110f..4fe661f 100644
--- a/Frontend/assets/scripts/dyn_host.js
+++ b/Frontend/assets/scripts/dyn_host.js
@@ -1,6 +1,4 @@
$(document).ready( function() {
- document.getElementsByName("iframe")[0].src =
- window.location.protocol + "//" + window.location.hostname + ":8097";
document.getElementById("rest-mock").href =
window.location.protocol + "//" + window.location.hostname + ":8097";
console.log("DONE")
diff --git a/Frontend/assets/scripts/frame.js b/Frontend/assets/scripts/frame.js
new file mode 100644
index 0000000..d40d307
--- /dev/null
+++ b/Frontend/assets/scripts/frame.js
@@ -0,0 +1,23 @@
+function changeActiveTools(activeClass, activeCategoryButton) {
+ let tools = document.getElementById("toolList").children
+
+ for (i = 0; i < tools.length; i++) {
+ if (tools[i].classList.contains(activeClass)) {
+ tools[i].style.display = "block";
+ }
+ else {
+ tools[i].style.display = "none";
+ }
+ }
+
+ let categories = document.getElementById("menu").children
+
+ for (i = 0; i < categories.length; i++) {
+ if (categories[i].innerText == activeCategoryButton) {
+ categories[i].classList.add("active")
+ }
+ else {
+ categories[i].classList.remove("active")
+ }
+ }
+}
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index 88bfa1d..ae58767 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -6,6 +6,7 @@
+
@@ -14,19 +15,29 @@
