added embed page to hmt

Author: rossengeorgiev

glyphs/icon-code.svg

@@ -39,13 +39,33 @@
                 <li class="home"><i class="icon-habhub"></i></li>
                 <li class="chasecar" style="display: none"><i class="icon-car"></i></li>
                 <li class="settings"><i class="icon-settings"></i></li>
+                <li class="embed">
+                    <svg width="100%" height="100%" viewbox="0 0 35 40" version="1.1">
+                    <path style="fill:#ffffff;" d="m19.188,4.0378c-1.698,10.6-3.396,21.2-5.094,31.8,1.478,0.9,2.037-0.6,2.024-1.7,1.607-10.1,3.213-20.1,4.82-30.1h-1.75zm-6.469,5.3c-3.9064,3-7.8129,6-11.719,9v3.7c3.9045,3,7.8143,6,11.719,9v-3.9c-3.0949-2.3-6.1868-4.6-9.2815-7,3.0937-2.3,6.1875-4.6,9.2815-6.9v-3.9zm9.562,0v3.9c3.094,2.3,6.188,4.6,9.281,6.9-3.093,2.4-6.187,4.7-9.281,7v3.9c3.905-3,7.814-6,11.719-9v-3.7c-3.906-3-7.813-6-11.719-9z"/>
+                    </svg>
+                </li>
                 <li class="about last"><i class="icon-question"></i></li>
             </ol>
             <span id="locate-me" style="display: none"><i class="icon-target"></i></span>
             <span id="app_name"><b>mobile<br/>tracker</b></span>
         </div>
     </header>
 
+    <div id="embedbox" style="display: none" class="flatpage">
+        <div class="slimContainer">
+            <h2>Embed tracker</h2>
+            <hr>
+            <span>
+                It's possible to embed the mobile tracker on any page. If you are developing a HAB project, you can add the tracker
+                to your website. You can customize the tracker to fit. There are options to limit, the visible vehicles to
+                a specific callsign. Or two, or three. There are options to play with. It's easy. Just visit the page bellow and check it out.
+            </span>
+            <br/><br/>
+            <span>
+                <a href="embed-preview.html">Customize tracker for embedding</a>
+            </span>
+        </div>
+    </div>
     <div id="aboutbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2>About</h2>

index.html

@@ -312,7 +312,7 @@ $(window).ready(function() {
         var e = $(this);
         var box = $('.main_screen');
         if(box.is(':hidden')) {
-            $('#chasecarbox,#aboutbox,#settingsbox').hide();
+            $('#chasecarbox,#aboutbox,#settingsbox,#embedbox').hide();
             box.show();
         }
         checkSize();
@@ -321,7 +321,7 @@ $(window).ready(function() {
         var e = $(this);
         var box = $('#chasecarbox');
         if(box.is(':hidden')) {
-            $('.main_screen,#aboutbox,#settingsbox').hide();
+            $('.main_screen,#aboutbox,#settingsbox,#embedbox').hide();
             box.show();
         }
         checkSize();
@@ -330,7 +330,7 @@ $(window).ready(function() {
         var e = $(this);
         var box = $('#aboutbox');
         if(box.is(':hidden')) {
-            $('.main_screen,#chasecarbox,#settingsbox').hide();
+            $('.main_screen,#chasecarbox,#settingsbox,#embedbox').hide();
             box.show();
         }
         checkSize();
@@ -339,7 +339,15 @@ $(window).ready(function() {
         var e = $(this);
         var box = $('#settingsbox');
         if(box.is(':hidden')) {
-            $('.main_screen,#chasecarbox,#aboutbox').hide();
+            $('.main_screen,#chasecarbox,#aboutbox,#embedbox').hide();
+            box.show();
+        }
+    })
+    .on('click', '.embed', function() {
+        var e = $(this);
+        var box = $('#embedbox');
+        if(box.is(':hidden')) {
+            $('.main_screen,#chasecarbox,#aboutbox,#settingsbox').hide();
             box.show();
         }
     });