3 files changed, 343 insertions, 0 deletions
diff --git a/sdv/docker/sdvmodel/website/style/array.css b/sdv/docker/sdvmodel/website/style/array.css
new file mode 100644
index 0000000..45a53fc
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/style/array.css
@@ -0,0 +1,55 @@
+
+@keyframes popup {
+  0%{
+    transform: scale(0.5);
+  }
+  90%{
+    transform: scale(1.1);
+  }
+  100%{
+    transform: scale(1.0);
+  }
+}
+
+.arr{
+  border-radius: 6px;
+  border-style: dashed;
+  border-color: #c9c9c9;
+  border-width: 2px;
+  display: inline-block;
+  padding-right: 3em;
+  margin-right: 15px;
+  margin-bottom: 5px;
+  position: relative;
+  animation: popup 0.2s ease;
+}
+
+
+.add-button{
+  background-image: url("../assets/plus-circle-solid.svg");
+  opacity: 0.7;
+  width: 2em;
+  height: 2em;
+  display: inline-block;
+  left: 0;  
+}
+.add-button:hover{
+  opacity: 1
+}
+
+
+
+.del-button{
+  background-image: url("../assets/trash-alt-regular.svg");
+  background-repeat: no-repeat;
+  opacity: 0.7;
+  width: 2em;
+  height: 2em;
+  position: absolute;
+  right: 0.5em;
+  bottom: 0.5em;
+}
+.del-button:hover{
+  opacity: 1
+}
+
diff --git a/sdv/docker/sdvmodel/website/style/index.css b/sdv/docker/sdvmodel/website/style/index.css
new file mode 100644
index 0000000..882c31a
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/style/index.css
@@ -0,0 +1,198 @@
+
+html,body
+{
+  padding: 0px;
+  margin: 0px;
+  font-family: 'Ubuntu', sans-serif;
+  color: #333333;
+  background-color: white;
+  scroll-behavior: smooth;
+}
+
+
+#site{
+  margin: 8%;
+  margin-top: 0px;
+  padding-bottom: 90px;
+}
+
+.add-new{
+  border: solid #c9c9c9;
+  border-width: 1px;
+  color: #f5f5f5;
+  opacity: 0.8;
+  font-size: 1.1em;
+  padding: 15px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  margin: 30px;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  background-color: #1fad4e;
+}
+.add-new:hover{
+  opacity: 1;
+  text-shadow: #f5f5f5 0px 0px 1px;
+}
+
+.add-new img{
+  width: 1em;
+  height: 1em;
+  margin-left: 5px;
+  vertical-align: middle;
+  filter: brightness(0) invert(1);
+  box-shadow: white 0px 0px 1px;
+}
+
+fieldset {
+  border-radius: 6px;
+  border-color: #c9c9c9;
+  border-width: 1px;
+  margin-top: 45px;
+  margin-bottom: 45px;
+  background-color: #f5f5f5;
+}
+
+
+
+fieldset legend{
+  font-weight: bold;
+  padding: 1em;
+  text-shadow: #bbb 0px 0px 2px;
+}
+
+.collapse-arrow::after{
+  content: "▲";
+  margin: 1em;
+  color: #61b9ff;
+  text-shadow: #61b9ff 0px 0px 4px;
+  cursor: pointer;
+  font-size: 1.2em;
+}
+
+.expand-arrow::after {
+  content: "▼";
+}
+
+@keyframes expand {
+  0%{
+    transform: scale(0.5);
+  }
+  90%{
+    transform: scale(1.1);
+  }
+  100%{
+    transform: scale(1.0);
+  }
+}
+
+/* when expand-arrow hide all siblings  */
+.expand-arrow ~ *{
+  display:none;
+}
+
+
+
+
+fieldset label{
+  padding: 1em;
+  padding-left: 2em;
+  text-shadow: #f0f0f0 0px 0px 2px;
+  width: 230px;
+  display: inline-block;
+}
+
+
+fieldset input{
+  border: solid #c9c9c9;
+  border-radius: 6px;
+  border-width: 1px;
+  padding: 5px;
+  padding-left: 15px;
+  color: #333333;
+  width: 150px;
+}
+
+fieldset input:hover{
+  background-color: #e8e8e8;
+}
+
+button{
+  border: solid #c9c9c9;
+  border-width: 1px;
+  height: 45px;
+  width: 170px;
+  color: #f5f5f5;
+  opacity: 0.8;
+  font-size: 1.1em;
+  margin: 30px;
+  cursor: pointer;
+}
+button:hover{
+  opacity: 1;
+  text-shadow: #f5f5f5 0px 0px 1px;
+}
+
+#save-changes{
+  background-color: #50affa;
+  float: right;
+}
+
+#save-changes::after{
+  content: "";
+  clear: both;
+  display: inline;
+}
+
+#delete{
+  background-color: #fa3c3c;
+}
+
+#reload{
+  background-color: #1fad4e;
+}
+
+button img{
+  width: 1em;
+  height: 1em;
+  margin-right: 10px;
+  margin-left: 10px;
+  filter: brightness(0) invert(1);
+}
+
+
+
+
+#save-changes.changed{
+  background-color: #deae00;
+
+}
+
+
+select{
+  background-color: white;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: solid #c9c9c9;
+  border-radius: 6px;
+  border-width: 1px;
+  padding: 3px;
+  padding-left: 15px;
+  color: #333333;
+  min-width: 150px;
+  cursor: pointer;
+}
+
+select:hover{
+  background-color: #e8e8e8;
+}
+
+
+.select::after{
+  content: "▼";
+  color: transparent;
+  text-shadow: #61b9ff -1.5em 0px 0px;
+}
diff --git a/sdv/docker/sdvmodel/website/style/report.css b/sdv/docker/sdvmodel/website/style/report.css
new file mode 100644
index 0000000..bc259fb
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/style/report.css
@@ -0,0 +1,90 @@
+
+
+.report{
+	text-align: left;
+    margin: 8%;
+    margin-top: 3%;
+	padding: 50px;
+
+    background-color: #f5f5f5;
+	border-radius: 6px;
+    border-color: #c9c9c9;
+    border-width: 1px;
+    border-style: solid;
+    text-shadow: #CCC 0px 0px 2px;
+    word-spacing: 0.1em;
+    line-height: 1.5em;
+}
+
+hr{
+	width: 60%;
+}
+
+
+button{
+  background-color: #50affa;
+  float: right;
+}
+
+
+.holder{
+	display: flex;
+	flex-wrap: wrap;
+	width: 98%;
+}
+
+
+.tab{
+	background-color: #f0f0f0;
+	border-radius: 8px;
+	border-bottom-right-radius: 0px;
+	border-bottom-left-radius: 0px;
+    border-color: #757474;
+    border-width: 2px;
+    border-style: solid;
+    display: inline-block;
+    padding: 3px;
+    padding-left: 6px;
+    padding-right: 10px;
+}
+
+.server{
+	background-image: url("/assets/server.svg");
+	background-repeat: repeat;
+    background-size: auto 100%;
+
+    background-color: #e3e3e3;
+    border-color: #757474;
+    border-width: 8px;
+    border-style: double;
+}
+
+
+
+.vnf{
+	min-width: 80px;
+	margin: 10px;
+
+	font-size: 0.9em;
+	padding: 5px;
+
+
+	border-radius: 8px;
+    border-color: #3dbbf5;
+    border-width: 3px;
+    border-style: solid;
+
+    background-color: #e6f4fa;
+}
+
+.vnf::after{
+	clear: both;
+	content: '';
+	display: inline-block;
+}
+
+.vnf > img{
+	width: 35px;
+    margin-left: 10px;
+	float: right
+}