fullscreen HTG

MTG/index.html

@@ -24,6 +24,9 @@
         <div id="nav_menu">
    </div>    
    </nav>
+   <div id="full" onclick="fullscreen()">
+    <i class="fas fa-expand"></i>
+   </div>
    <script src="/menu/menu.js"></script>
     <main>
         <div id="player1" class="player">

MTG/script.js

@@ -118,3 +118,33 @@ localStorage.setItem('playerCount', playerCount);
 
 }
 
+function fullscreen() {
+  var elem = document.documentElement;
+
+  if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+  } else if (elem.mozRequestFullScreen) {
+      /* Firefox */
+      elem.mozRequestFullScreen();
+  } else if (elem.webkitRequestFullscreen) {
+      /* Chrome, Safari and Opera */
+      elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) {
+      /* IE/Edge */
+      elem.msRequestFullscreen();
+  }
+
+  if (document.exitFullscreen) {
+      document.exitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+      /* Firefox */
+      document.mozCancelFullScreen();
+  } else if (document.webkitExitFullscreen) {
+      /* Chrome, Safari and Opera */
+      document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+      /* IE/Edge */
+      document.msExitFullscreen();
+  }
+}
+

MTG/style.css

@@ -7,7 +7,9 @@
 }
 
 body {
-  background-color: rgb(82, 100, 100);
+  /* background-color: rgb(78, 69, 202); */
+  background: rgb(2,0,36);
+background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(137,137,194,1) 47%, rgba(108,127,131,1) 100%);
   min-height: 100vh;
   /* width: 100vw; */
   margin: 0;
@@ -15,6 +17,14 @@ body {
   /* height: 100% */
   /* align-items: center */
 }
+#full{
+  position: absolute;
+  top: 5px;
+  left: 95%;
+  z-index: 100;
+  color:rgb(165, 162, 162);
+  font-size: 3rem;
+}
 main {
   display: flex;
   justify-content: space-evenly;