External Mode Added

css/style.css

@@ -509,6 +509,12 @@ td#seen {
     margin: auto;
 }
 
+#external_mode_button {
+    position: relative;
+    left: 50%;
+    right: 50%;
+}
+
 #settingstext>table>tbody>tr>td {
     padding: 15px;
 }
@@ -692,4 +698,41 @@ td#seen {
     position: absolute;
     top: 51%;
     left: 69%;
-}
+}
+
+#external_connected {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    color: red;
+    text-align: center;
+    font-size: xx-large;
+    font-weight: bold;
+    
+}
+
+#external_title {
+    animation: blinkingText 1s infinite;
+    position: absolute;
+    top: 55%;
+    left: 35%;
+}
+
+#external_image {
+    animation: blinkingText 1s infinite;
+    position: absolute;
+    top: 40%;
+    left: 48%;
+}
+
+@keyframes blinkingText {
+   
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }

gmap.html

@@ -57,6 +57,10 @@
         <input id="airframes_post_icao" type="hidden" name="ica024" value="">
         <input type="hidden" name="submit" value="submit">
     </form>
+    <div id="external_connected" class="centered" style="display: none;" onclick="document.getElementById('external_connected').style.display = 'none'">
+        <img src="images/connection.png" id="external_image">
+<span id="external_title">EXTERNAL MODE ACTIVATED</span>
+    </div>
     <div id="home_page" style="display: none;">
         <img src="images/logo.png" class="logo">
         <table class="home_table">
@@ -125,6 +129,13 @@
                             <span class="mdl-switch__label"></span>
                           </label></td>
                 </tr>
+                <tr>
+                    <td>
+                        <button class="mdl-button mdl-js-button mdl-button--raised" onclick="document.getElementById('external_connected').style.display = 'block'" id="external_mode_button">
+                            Enable External Mode
+                          </button>
+                    </td>
+                </tr>
             </table>
             <table>
                 <tr>

js/script2.js

@@ -433,4 +433,4 @@ function toTitleCase(str) {
     return str.toLowerCase().split(' ').map(function(word) {
         return (word.charAt(0).toUpperCase() + word.slice(1));
     }).join(' ');
-}
+}