switch windows starting demo

01_Code/physical_computing_interface/css/style.css

 body,html{width:100%;height:100%;padding:0;margin:0;}
 
 :root {
-    --color1: #ffffff; /*white*/
+    --color1: #fffffff6; /*white*/
     --color11: #ffffff8c; /*shafaf*/
     --color2: #020227;  /*kohly*/
     --color3: #1c5c61; /*teal*/
@@ -48,6 +48,17 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     
 }
 
+#switch{
+    background-color: var(--color1);
+    width: 100%;
+    height: 100%;
+    opacity: 0.85;
+    position: absolute;
+    display: none ;
+    z-index: 101;
+}
+
+
 #threejs1{
     background-color: var(--color11);
     /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
@@ -198,6 +209,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     font-family: var(--font);
     /* left: var(--dragwidth);
     top:var(--top); */
+    z-index: 10;
 }
 
 #jsoneditor {
@@ -239,7 +251,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
 }
 
 #time{
-    z-index: 9999999;
+    z-index: 99;
 
 }
 
@@ -262,7 +274,6 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
 
     font-family: var(--font);
     color: var(--color2);
-    z-index: 1000000;
     /* top:var(--dragwidth); */
 }
   
@@ -280,6 +291,8 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;
+  position: absolute;
+  z-index: 10;
 }
 
 .slider:hover {
@@ -304,3 +317,80 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
   cursor: pointer;
 }
 
+
+.dropdown1 {
+    position: absolute;
+    /* display: inline-block; */
+    float: right; 
+    right: 75%;
+    float: bottom; 
+    bottom: 75%;
+}
+
+.dropdown2 {
+    position: absolute;
+    /* display: inline-block; */
+    float: left; 
+    left: 75%;
+    float: bottom; 
+    bottom: 75%;
+}
+
+.dropdown3 {
+    position: absolute;
+    /* display: inline-block; */
+    float: right; 
+    right: 75%;
+    float: top; 
+    top: 75%;
+}
+
+.dropdown4 {
+    position: absolute;
+    /* display: inline-block; */
+    float: left; 
+    left: 75%;
+    float: top; 
+    top: 75%;
+}
+
+.dropbtn {
+    background-color:  var(--color3);;
+    color: white;
+    padding: 10px;
+    font-size: 16px;
+    font-family: var(--font);
+    border: none;
+    border-radius: 5px;
+  }
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+    /* float: left; */
+    /* right: 40%; */
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 120px;
+    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 10px 12px;
+    font-family: var(--font);
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #ddd;}
+
+.dropdown:hover .dropdown-content {display: block;}
+
+.dropdown:hover .dropbtn {background-color: var(--color3);}
+