From eefd4449051078254fc264d41923d58cc13e744c Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 1 Jul 2020 15:07:20 +0200 Subject: [PATCH] Some Design Stuff --- vcm/config.json | 20 +++-- vcm/templates/custom.css | 166 +++++++++++++++++++++++++++++++++++++++ vcm/templates/custom.js | 36 ++++++++- 3 files changed, 216 insertions(+), 6 deletions(-) diff --git a/vcm/config.json b/vcm/config.json index 642a3d915..f11e80b0c 100644 --- a/vcm/config.json +++ b/vcm/config.json @@ -356,14 +356,24 @@ ] },{ "template": [ - "
", - "

Nordbahnhof Planungskonzept

", + "
", + "

Nordbahnhof Planungskonzept

", "
", "

Für mehr Infos klicken Sie bitte hier!

", - "", - "", - "", + "
", + "
", + "Neue Planung", + "

", + "
", + "Ist Zustand", + "

", + "
", + "", + "", + "", + "
", + "
", "
", "<% %>" diff --git a/vcm/templates/custom.css b/vcm/templates/custom.css index fb85a935e..f1ae5e61b 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 d8432a17c..25da9cf6f 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 -- GitLab