diff --git a/vcm/config.json b/vcm/config.json
index 642a3d915420dd445e7fb13056f7911bd24ba1a6..f11e80b0c1d313b0d11c20a023f5ba0cb80bd2a8 100644
--- a/vcm/config.json
+++ b/vcm/config.json
@@ -356,14 +356,24 @@
]
},{
"template": [
- "<div class='balloon' id='myBalloonNord'>",
- " <h1 class='balloon-title' >Nordbahnhof Planungskonzept</h1>",
+ "<div class='balloon' style='width: 200px; background-color: #3C3C3C; color: #FFFFFF;' id='myBalloonNord'>",
+ " <h1 class='balloon-title' style='color: #FFFFFF;'>Nordbahnhof Planungskonzept</h1>",
" <div class='balloon-content' style='margin-right: 0px;'",
" </div>",
"<p class='balloon-text'><span>Für mehr Infos klicken Sie bitte hier!</span><br></p>",
- "<button id='newP' onclick='newPlan()'>Neue Planung</button>",
- "<button id='oldZ' onclick='oldZust()'>Ist Zustand</button>",
- "<button id='high' onclick='highlightStuff()'>Highlight</button>",
+ "<div class='box-3'>",
+ "<div class='btn btn-three' onclick='newPlan()'>",
+ "<span>Neue Planung</span>",
+ "</div><br>",
+ "<div class='btn btn-three' onclick='oldZust()'>",
+ "<span>Ist Zustand</span>",
+ "</div><br></div><div class='box-3'>",
+ "<div class='switch'>",
+ "<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight();'>",
+ "<label for='toggle'><i></i></label>",
+ "<span></span>",
+ "</div>",
+ "</div>",
"</div>",
"<% %>"
diff --git a/vcm/templates/custom.css b/vcm/templates/custom.css
index fb85a935eb77511675113c1ff2ec234193c70cc3..f1ae5e61b39abadd82be1055ed734eceaa8325e0 100644
--- a/vcm/templates/custom.css
+++ b/vcm/templates/custom.css
@@ -280,3 +280,169 @@ div.tour-top-navi {
+/*----TEST--------------------------*/
+
+
+.box-1 { background-color: #FF6766; }
+.box-2 { background-color: #3C3C3C; }
+.box-3 {
+ background-color: #3C3C3C;;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;}
+
+.btn {
+ line-height: 50px;
+ height: 50px;
+ text-align: center;
+ width: 200px;
+ cursor: pointer;
+}
+
+
+
+
+
+
+
+
+.btn-three {
+ color: #ffffff;
+ transition: all 0.5s;
+ position: relative;
+ margin: 5px;
+}
+.btn-three::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ background-color: rgba(255, 255, 255, 0.1);
+ transition: all 0.3s;
+}
+.btn-three:hover::before {
+ opacity: 0 ;
+ transform: scale(0.5,0.5);
+}
+.btn-three::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ opacity: 0;
+ transition: all 0.3s;
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ transform: scale(1.2,1.2);
+}
+.btn-three:hover::after {
+ opacity: 1;
+ transform: scale(1,1);
+}
+
+
+
+
+
+.switch input {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -moz-opacity: 0;
+ opacity: 0;
+ z-index: 100;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
+.switch {
+ width: 180px;
+ height: 55px;
+ position: relative;
+ margin-top: 5px !important;
+ margin-bottom: 5px !important;
+ margin-left: 20px !important;
+ margin-right: 10px !important;
+}
+
+.switch label {
+ display: block;
+ width: 80%;
+ height: 100%;
+ position: relative;
+ background: #1F2736; /*#121823*/
+ background: linear-gradient(#121823, #161d2b);
+ border-radius: 30px 30px 30px 30px;
+ box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
+ -webkit-transition: all .5s ease;
+ transition: all .5s ease;
+}
+
+.switch input ~ label i {
+ display: block;
+ height: 51px;
+ width: 51px;
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ z-index: 2;
+ border-radius: inherit;
+ background: #283446; /* Fallback */
+ background: linear-gradient(#36455b, #283446);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 12px 12px rgba(0,0,0,0.4);
+ -webkit-transition: all .5s ease;
+ transition: all .5s ease;
+}
+
+.switch label + span {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ right: 0px;
+ top: 17px;
+ width: 18px;
+ height: 18px;
+ border-radius: 10px;
+ background: #283446;
+ background: gradient-gradient(#36455b, #283446);
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);
+ -webkit-transition: all .5s ease;
+ transition: all .5s ease;
+ z-index: 2;
+}
+
+/* Toggle */
+
+.switch input:checked ~ label + span {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ border-radius: 10px;
+ -webkit-transition: all .5s ease;
+ transition: all .5s ease;
+ z-index: 2;
+ background: #b9f3fe;
+ background: gradient-gradient(#ffffff, #77a1b9);
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
+}
+
+.switch input:checked ~ label i {
+ left: auto;
+ left: 63%;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.3), inset -1px 0 1px #b9f3fe;
+ -webkit-transition: all .5s ease;
+ transition: all .5s ease;
+}
\ No newline at end of file
diff --git a/vcm/templates/custom.js b/vcm/templates/custom.js
index d8432a17c6f36a81d735c213f2ebda9c50b0b036..25da9cf6f39c49fc470727766f6972a7a30763e2 100644
--- a/vcm/templates/custom.js
+++ b/vcm/templates/custom.js
@@ -284,4 +284,38 @@ function highlightBuildings(layerIndex, id){
// console.log("layer.highlight({" + idtext + ":Cesium.Color.fromCssColorString('#BB8FCE')})")
// }
-}
\ No newline at end of file
+}
+
+function unhighlightStuff() {
+ var Framework = vcs.vcm.Framework.getInstance();
+ var layers = Framework.getLayers();
+ var layer = layers[3];
+ layer.highlight({"DEBW522AA00022dcc":Cesium.Color.fromCssColorString("#BB8FCE")})
+ layer.highlight({"DEBW522AA0003bf3b":Cesium.Color.fromCssColorString("#BB8FCE")})
+ layer.highlight({"DEBW522AA0000976a":Cesium.Color.fromCssColorString("#BB8FCE")})
+ layer.highlight({"DEBW522AA00001d00":Cesium.Color.fromCssColorString("#BB8FCE")})
+ layer.clearHighlighting();
+
+
+ layer2 = layers[2];
+ var tileset = layer2.getCesium3DTileset();
+ layer2.clearStyle();
+ // tileset.style = new Cesium.Cesium3DTileStyle({
+ // color: {
+ // conditions: [
+ // ["true", "rgb(127, 59, 8)"],
+ // ],
+ // },
+ // });
+}
+
+
+
+function checkboxHighlight(){
+ var chk_ceil= document.getElementById("chxboxHighlight");
+ if(chk_ceil.checked == true){
+ highlightStuff();
+ } else {
+ unhighlightStuff();
+ }
+};
\ No newline at end of file