Skip to content

GitLab

Commit eefd4449 authored by Patrick's avatar Patrick
Browse files

Some Design Stuff

parent 5cf1f572
Hide whitespace changes
Inline Side-by-side
vcm/config.json
View file @ eefd4449
......@@ -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>",
"<% %>"
......
vcm/templates/custom.css
View file @ eefd4449
......@@ -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
vcm/templates/custom.js
View file @ eefd4449
......@@ -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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal