add website focus overlay

front/dist/index.tmpl.html

@@ -78,6 +78,10 @@
                 <button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
                     <img src="resources/logos/close.svg"/>
                 </button>
+                <button class="top-right-btn" id="cowebsite-focus" alt="focus the iframe">
+                    <img id="cowebsite-focus-inactive" src="resources/logos/cinema.svg"/>
+                    <img id="cowebsite-focus-active" style="display: none;" src="resources/logos/cinema-close.svg"/>
+                </button>
             </div>
 
             <div id="audioplayerctrl" class="hidden">

front/dist/resources/style/cowebsite-mobile.scss

@@ -43,6 +43,9 @@
         &#cowebsite-fullscreen {
           left: 0;
         }
+        &#cowebsite-focus {
+          left: 25px;
+        }
       }
     }
   }

front/dist/resources/style/cowebsite.scss

@@ -4,12 +4,15 @@
   position: fixed;
   transition: transform 0.5s;
   background-color: white;
-  z-index: 999;
   
   &.loading {
     background-color: gray;
   }
 
+  &.focus {
+    z-index: 999;
+  }
+
   main {
     iframe {
       width: 100%;
@@ -85,6 +88,9 @@
       &#cowebsite-fullscreen {
         top: 25px;
       }
+      &#cowebsite-focus {
+        top: 50px;
+      }
     }
   }
 }

front/dist/resources/style/style.css

@@ -166,8 +166,8 @@ video#myCamVideo {
     position: absolute;
     bottom: 0px;
     right: 0px;
-    width: 450px;
-    height: 150px;
+    width: 300px;
+    height: 50px;
 }